jquery放大镜效果代码 jQuery 效果 – 停止动画

jquery放大镜效果代码

jQuery放大镜效果是一种常见的图片展示效果，它可以让用户在小图上放大预览大图，从而更好地了解图片的细节。实现这个效果的关键是使用jQuery的hover()方法，当鼠标移动到小图上时，显示大图，当鼠标离开时，隐藏大图。

// 定义变量
var $smallImg = $('.small-img'); // 小图元素
var $bigImg = $('.big-img'); // 大图元素
 
// 绑定鼠标进入事件
$smallImg.hover(function(){ 
    // 获取小图中的data-bigimg属性值，即大图url 
    var bigImgUrl = $(this).attr('data-bigimg'); 
    // 把大图url赋值到$bigImg元素的src属性上 
    $bigImg.attr('src', bigImgUrl); 
    // 显示$bigImg元素 
    $bigImg.show(); 
}, function(){ 
    // 隐藏$bigImg元素 
    $bigImg.hide();  								   });   

jQuery 效果 – 停止动画