js实现放大镜效果

js实现放大镜效果
代码来源：https://www.cnblogs.com/-lizi/p/8182824.html

学习心得：
1、该特效并不是真的把图片放大，原本就有两张内容一致一大一小的图片，放大镜在小图上滑动时，另设置一标签显示大图。
2、原作者提醒：“在实现放大镜在图片上移动时，我给商品图片绑定了mousemove鼠标移动事件，当鼠标移动的同时，也移动放大镜，但是效果却不是想象的样子，会有一些卡顿、闪烁的现象。当鼠标在商品图片上移动时，放大镜也随之移动，当鼠标在放大镜图片上时，则不会移动，这是因为绑定mousemove事件的是商品图片，而不是放大镜图片，而放大镜图片所在的图层在商品图片之上，所以当鼠标移动到放大镜图片上时，就不会触发mousemove事件，从而就出现了卡顿的现象。那么，怎样解决呢？
我又加了一个div，这个div的大小和商品图片的div的大小一样，背景色为透明色，图层在最上面，然后给这个透明的div绑定mousemove事件，放大镜图片就会流畅的移动了。”

js实现放大镜效果
<display.css>

*{
    margin: 0;
    padding: 0;
}
body{
    background: #fff;
}
ul{
    list-style: none;
}
.container{
    width: 850px;
    margin: 50px auto;
    text-align: center;
}
.magnifierContainer{
    display: flex;
    margin-top: 30px;
}
.imgMedium{
    position: relative;
}
.imgLeft .magnifier{//“.imgLeft”与“.magnifier”之间有空格，空格不能省，否则浏览器识别不了class“.magnifier”
    position: absolute;
    display: none;
    width: 200px;
    height: 200px;
}
.mediumContainer {
    width: 350px;
    height: 350px;
    border: 1px solid #eee;
    overflow: hidden;
}
#zhezhao {
    width: 350px;
    height: 350px;
    background: transparent;
    position: absolute;
    top: 0;
    border: 1px solid transparent;
}
#zhezhao:hover {
    cursor: move;
}
.img_x {
    width: 350px;
    height: 77px;
    border: 1px solid #eee;
    margin-top: 20px;
    display: flex;
}
.img_x li{
    width: 54px;
    height: 54px;
    border: 2px solid transparent;
    margin: 8px 4px;
    padding: 2px;
}
.img_u {
    width: 500px;
    height: 450px;
    border: 1px solid #eee;
    float: left;
    margin-left: 15px;
    overflow: hidden;
    display: none;
}

<main.html>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>

</head>
<body>
    <div class="container">
        <h2>JS实现放大镜效果</h2>
        <div class="magnifierContainer">
            <div class="imgLeft">
                <div class="imgMedium" id="imgMedium">
                    <div class="magnifier" id="magnifier">
                        <img src="http://product.dangdang.com/images/zoom_pup.png">
                    </div>
                    <div class="mediumContainer" id="mediumContainer">
                        <img src="images/picture_x_1.jpg">
                    </div>
                    <div id="zhezhao"></div>
                </div>
                <ul class="img_x" id="img_x">
                    <li><img src="images/picture_m_1.jpg"></li>
                    <li><img src="images/picture_m_2.jpg"></li>
                    <li><img src="images/picture_m_3.jpg"></li>
                    <li><img src="images/picture_m_4.jpg"></li>
                    <li><img src=""></li>
                </ul>
            </div>
            <div class="imgRight">
                <div class="img_u" id="img_u">
                    <img src="images/picture_u_1.jpg">
                </div>
            </div>
        </div>
    </div>
</body>
<link rel="stylesheet" type="text/css" href="display.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="style.js"></script>
</html>

<style.js>
//设定鼠标位于放大镜图片中心，根据鼠标相对于“zhezhao”的位置及"zhezhao"的宽度便可计算出放大镜图片在“zhezhao”中的相对位置（left,top），使其按相对位置显示，此外left和top对计算大图片的显示也有作用

$("#img_x li").eq(0).css('border','2px solid coral');//设置index=0的<li>的css
$("#zhezhao").mousemove(function(e){
    $("#img_u").show();
    $("#magnifier").show();
   var left=e.offsetX-parseInt($("#magnifier").width())/2;//e为事件对象，此处为鼠标事件对象； offsetX——鼠标相比较于触发事件的位置
   var top=e.offsetY-parseInt($("#magnifier").height())/2;
    left=left<0 ? 0 : left;
    left=left>(parseInt($('#zhezhao').outerWidth())-parseInt($('#magnifier').outerWidth()))?(parseInt($('#zhezhao').outerWidth())-parseInt($('magnifier').outerWidth())):left;
    //.outerwidth()返回元素的外部宽度
    top=top<0?0:top;
    top=top>(parseInt($('#zhezhao').outerHeight())-parseInt($('#magnifier').outerHeight()))?(parseInt($('#zhezhao').outerHeight())-parseInt($('magnifier').outerHeight())):top;
    $('#magnifier').css('left',left+'px');
    $('#magnifier').css('top',top+'px');
    var leftRate=left/parseInt($('#zhezhao').outerWidth());
    var bigLeft=leftRate*parseInt($('#img_u img').outerWidth());
    $('#img_u img').css('margin-left',-bigLeft+'px');
    var topRate=top/parseInt($('#zhezhao').outerHeight());
    var bigTop=topRate*parseInt($('#img_u img').outerHeight());
    $('#img_u img').css('margin-top',-bigTop+'px');
});
$("#zhezhao").mouseleave(function () {
    $("#magnifier").hide();
    $("#img_u").hide();
});
$("#img_x li").mouseover(function () {
    $(this).css('border', '2px solid coral').siblings().css('border', '2px solid transparent');//siblings() 方法返回被选元素的所有同胞元素
    /** for(var i=0;i<$("#img_x li").length;i++){
        $("#img_x li").eq(i).css('border','2px solid transparent');
    }
    $(this).css('border', '2px solid coral');
**/
   $('#mediumContainer img').eq(0).attr('src','images/picture_x_'+($(this).index()+1)+'.jpg');//.attr()方法设置或返回被选元素的属性值。
   $('#img_u img').attr('src','images/picture_u_'+($(this).index()+1)+'.jpg');
});

js实现放大镜效果

相关推荐