发大镜效果实现

Html

Css

$(window).load(function() {

var $smallImg = $("#smallImg"); //小图
    var $bigImg = $("#bigImg") //大图
    var $smallCursor = $("#smallCursor"); //小可视区域
    var $bigCursor = $("#bigCursor"); //大可视区域

//根据比例重新计算小可视区的大小
    //公式：  小可视区宽度/大可视区宽度 = 小图宽度/大图宽度
    $smallCursor.width($smallImg.outerWidth() * $bigCursor.outerWidth() / 800);
    $smallCursor.height($smallImg.outerWidth() * $bigCursor.outerWidth() / 800);
    //由于小可视区域会隐藏，因此不能使用offsetWidth属性来计算宽度。
    //smallCursor的边长
    diameter = $smallCursor.outerWidth();
    //大小可视区比例
    var scale = $bigCursor.outerWidth() / diameter;
    $smallImg.mousemove(function(evt) {
        var e = evt || event;
        var disX = e.clientX - $smallImg.offset().left - diameter / 2;
        var disY = e.clientY - $smallImg.offset().top - diameter / 2;

var leftSide = $smallImg.offset().left + diameter / 2;
        var topSide = $smallImg.offset().top + diameter / 2;

var rightSide = $smallImg.offset().left + $smallImg.outerWidth() - diameter / 2;
        var downSide = $smallImg.offset().top + $smallImg.outerHeight() - diameter / 2;
        if (e.clientX >= leftSide && e.clientX <= rightSide && e.clientY >= topSide && e.clientY <= downSide) {
            $smallCursor.css("display", "block");
            //小图的位置

$smallCursor.css("left", disX);
            $smallCursor.css("top", disY);
            //大图的位置
            $bigImg.css("left", -disX * scale);
            $bigImg.css("top", -disY * scale);
        } else {
            $smallCursor.css("display", "none");
        }
    });

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

发大镜效果实现



代码描述：适合商品发大镜效果的实现

原理：使用两张图片，根据比例实现放大镜效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

三人行必有电灯泡

相关代码

发大镜效果实现

最新