此时情绪此时天，无事小神仙
好好生活，平平淡淡每一天

编辑

Js放大镜效果

效果图

image

Html代码

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>放大镜效果</title>
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .container {
        width: 850px;
        margin: 50px auto;
        text-align: center;
    }
    .magnifierContainer {
        display: flex;
        margin-top: 30px;
    }
    .imgMedium {
        position: relative;
    }
    .imgLeft .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;
    }
</style>
</head>
<body>
<div class="container">
    <h2>放大镜效果</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="http://img3m3.ddimg.cn/2/21/22628333-1_w_2.jpg">
                </div>    
                <div id="zhezhao"></div>            
            </div>
            
            <!-- 缩略图 -->
            <ul class="img_x" id="img_x">
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-1_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-2_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-3_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-4_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-5_x_2.jpg"></li>
            </ul>
        </div>
        <div class="imgRight">
            <!-- 大图 -->
            <div class="img_u" id="img_u">
                <img src="http://img3m3.ddimg.cn/2/21/22628333-1_u_2.jpg">
            </div>
        </div>        
    </div>
</div>
</body>
<script type="text/javascript">
    $('#img_x li').eq(0).css('border', '2px solid coral');
    $('#zhezhao').mousemove(function(e){
        $('#img_u').show();
        $('#magnifier').show();
        var left = e.offsetX - parseInt($('#magnifier').width()) / 2;
        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;
        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(){
        $('#img_u').hide();
        $('#magnifier').hide();
    })

    $('#img_x li').mouseover(function(){
        $(this).css('border', '2px solid coral').siblings().css('border', '2px solid transparent');
        $('#mediumContainer img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_w_2.jpg');
        $('#img_u img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_u_2.jpg');
    })
</script>
</html>
posted @ 2019-12-03 09:51  踏步  阅读(164)  评论(0)  编辑  收藏  举报