javascript简单练习 - 模仿图片视觉差展示效果

两张图片展示视觉差效果，效果如下，通过鼠标在图片上滑动，形成两张图切换展示

全部代码如下~样式简单，可能问题还很多，仅供简单练手~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米手机视觉差展示图片</title>
    <style>
        .content{
            width: 860px; 
            height: 520px; 
            margin: 20px auto; 
            position: relative;
        }
        .bar{ 
            width:5px; 
            height:100%; 
            background:rebeccapurple; 
            position: absolute; 
            left:50%; 
            top:0;
            z-index: 2; 
        }
        /* 起始位置白色的手机在上层宽一半 */
        .whitePhone{
            width:50%;
            height:100%; 
            position:absolute; 
            left:0; 
            top :0;
            z-index:1;
            overflow:hidden;
        }
    </style>
    <script type="text/javascript" src="../common/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            // 获取三个元素
            var whitePhone = $(".whitePhone") ;
            var blackPhone = $(".blackPhone") ;
            var bar = $(".bar") ;
            // 当鼠标在图片上移动事件
            $(".content").mousemove(function(event){
                var e = event || window.event ;
                // 要让bar随着鼠标的位置移动
                // bar距离content左边:鼠标相对与浏览器的横坐标 - 当前元素相对于父元素body的左边的距离
                let leftDistance = e.clientX - this.offsetLeft ;
                if(leftDistance < 0){  //移除图片位置
                    leftDistance = 0
                }else if(leftDistance >= $(this).width()-bar.width()){
                    leftDistance = $(this).width()-bar.width() ;
                }
                // 将移动条的位置改变，将白色图片的宽度改变
                bar.css("left",leftDistance+'px');
                whitePhone.css("width",leftDistance+'px');
            })
        })
    </script>
</head>
<body>
    <div class="content">
        <div class="whitePhone top">
            <img src="img/1.jpg" alt="white">
        </div>
        <div class="blackPhone bottom">
            <img src="img/2.jpg" alt="black">
        </div>
        <div class="bar"></div>
    </div>
</body>
</html>

javascript简单练习 - 模仿图片视觉差展示效果

猜你喜欢