<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*.Center { width: 500px; height: 500px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin:auto; background-color: beige; }*/ .Center { width: 460px; height: 500px; margin: 50px 500px; background-color: beige; } ul { width: 460px; height: 370px; overflow: hidden; position: relative; } li { position: absolute; left: 0; top: 0; list-style: none; } .Line { width: 460px; height: 18px; background-color: aqua; margin-top: 20px; position: relative; } .circle { width: 20px; height: 20px; background-color: lemonchiffon; border-radius: 10px; position: absolute; left: 50%; } .circle1 { left: 95%; } .circle2 { left: 0; } img { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } .nn3 { display: inline-block; width: 460px; height: 370px; /*background: url(./images/81.jpg) no-repeat;*/ /*background-size: 450px 370px;*/ } </style> </head> <body> <div class="Center" id="Center"> <ul> <li> <span id="img3" class="nn3">666</span> <!--<img id="img3" src="./images/82.jpg" width="460" height="370"/>--> </li> <!--<li><img id="img2" src="./images/81.jpg" width="460" height="370"/></li>--> <!--<li><img id="img1" src="./images/80.jpg" width="460" height="370"/></li>--> <li><img id="img3" src="./images/82.jpg" width="460" height="370"/></li> <li><img id="img2" src="./images/81.jpg" width="460" height="370"/></li> <li><img id="img1" src="./images/80.jpg" width="460" height="370"/></li> </ul> <div class="Line" id="Line"> <div class="circle circle1 circle2" id="circle"></div> <div class="circle"></div> <div class="circle circle1"></div> </div> </div> <script src="jquery-1.12.2.min.js"></script> <script> var box1 = document.getElementById('Line');// 横线 var circle = document.getElementById('circle');//圆心 var Center = document.getElementById('Center');//圆心 var boxX; $(window).on("mousedown", function () {// 监听 按下、移动、离开 // console.log(box1); $(Center).on("mousemove", function (event) { //让mask跟着 鼠标的在盒子中的位置移动 var event = event || window.event; //鼠标在页面上的位置 var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft; //计算鼠标在盒子中的位置 boxX = pageX - box1.offsetLeft;// 第一张开始的位置 $(circle).css({left: boxX + 'px'}); // 圆圈在屏幕中的位置(动态改变) if (boxX > 50 && boxX < 205) { var boX = boxX - 205 > 0 ? 0 : Math.abs(boxX - 205);// 到第1个点判断绝对值 var boX2 = boxX - 50;// 到第1个点判断绝对值 if (boX < 155 && boX > 0) { // console.log("点所在的位置:" + boX); // console.log(boX2 / 155); $("#img1").css({opacity: boX / 155});//改变图片透明度 1-0 0-230 $("#img2").css({opacity: boX2 / 155});//改变图片透明度 0-1 0-230 $("#img3").css({opacity: 0});//改变图片透明度 0 - 0 0-230 } } else if (boxX > 204 && boxX < 255) { $("#img1").css({opacity: 0});//改变图片透明度 0 0-230 $("#img2").css({opacity: 1});//改变图片透明度 1 0-230 $("#img3").css({opacity: 0});//改变图片透明度 0 0-230 } else if (boxX > 254 && boxX < 410) { var boX3 = boxX - 410 > 0 ? 0 : Math.abs(boxX - 410);// 到第1个点判断绝对值 var boX4 = boxX - 255;// 到第1个点判断绝对值 // console.log(boX3); if (boX3 < 155 && boX3 > 0) { // console.log("点所在的位置:" + boX); // console.log(boX4 / 155); $("#img1").css({opacity: 0});//改变图片透明度 0-0 230-460 $("#img2").css({opacity: boX3 / 155});//改变图片透明度 1-0 230-460 $("#img3").css({opacity: boX4 / 155});//改变图片透明度 0 - 1 230-460 } } else if (boxX > 409) { $("#img1").css({opacity: 0});//改变图片透明度 0 0-230 $("#img2").css({opacity: 0});//改变图片透明度 0 0-230 $("#img3").css({opacity: 1});//改变图片透明度 1 0-230 } else { $("#img1").css({opacity: 1}); $("#img2").css({opacity: 0}); $("#img3").css({opacity: 0}); } if (boxX > 440) { // console.log(2); $(circle).css({left: 440 + 'px'}); // 圆圈在屏幕中的位置(动态改变) } }); }); window.addEventListener("mouseup",function(){ // console.log("抬起"); if (boxX > 0 && boxX < 115) { // console.log(boxX); $("#img1").animate({ opacity: '1' }, 1000); $("#img2").animate({ opacity: '0' }, 1000); $("#img3").animate({ opacity: '0' }, 1000); $(circle).animate({ left: "0px" }, 1000); // console.log(3); } else if (boxX > 115 && boxX < 230) { $("#img1").animate({ opacity: '0' }, 1000); $("#img2").animate({ opacity: '1' }, 1000); $("#img3").animate({ opacity: '0' }, 1000); $(circle).animate({ left: "230px" }, 1000); }else if (boxX > 230 && boxX < 345) { $("#img1").animate({ opacity: '0' }, 1000); $("#img2").animate({ opacity: '1' }, 1000); $("#img3").animate({ opacity: '0' }, 1000); $(circle).animate({ left: "230px" }, 1000); }else if (boxX > 345 && boxX < 460) { $("#img1").animate({ opacity: '0' }, 1000); $("#img2").animate({ opacity: '0' }, 1000); $("#img3").animate({ opacity: '1' }, 1000); $(circle).animate({ left: "440px" }, 1000); } $(Center).off("mousemove");//解绑事件 }); $(window).on("mouseup", function () { // onmouseup console.log("鼠标抬起"); $(Center).off("mousemove");//解绑事件 }); </script> </body> </html>
有待优化 仅供参考 欢迎指出不足,和更改意见