滑动改变渐变切换图片

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         /*.Center {
  8              500px;
  9             height: 500px;
 10             position: absolute;
 11             top: 0;
 12             left: 0;
 13             right: 0;
 14             bottom: 0;
 15             margin:auto;
 16             background-color: beige;
 17         }*/
 18  
 19         .Center {
 20             width: 460px;
 21             height: 500px;
 22             margin: 50px 500px;
 23             background-color: beige;
 24         }
 25  
 26         ul {
 27             width: 460px;
 28             height: 370px;
 29             overflow: hidden;
 30             position: relative;
 31         }
 32  
 33         li {
 34             position: absolute;
 35             left: 0;
 36             top: 0;
 37             list-style: none;
 38         }
 39  
 40         .Line {
 41             width: 460px;
 42             height: 18px;
 43             background-color: aqua;
 44             margin-top: 20px;
 45             position: relative;
 46         }
 47  
 48         .circle {
 49             width: 20px;
 50             height: 20px;
 51             background-color: lemonchiffon;
 52             border-radius: 10px;
 53             position: absolute;
 54             left: 50%;
 55         }
 56  
 57         .circle1 {
 58             left: 95%;
 59         }
 60  
 61         .circle2 {
 62             left: 0;
 63         }
 64         img {
 65             -moz-user-select: none;
 66             -webkit-user-select: none;
 67             -ms-user-select: none;
 68             -khtml-user-select: none;
 69             user-select: none;
 70         }
 71  
 72         .nn3 {
 73             display: inline-block;
 74             width: 460px;
 75             height: 370px;
 76  
 77             /*background: url(./images/81.jpg) no-repeat;*/
 78             /*background-size: 450px 370px;*/
 79         }
 80     </style>
 81 </head>
 82 <body>
 83  
 84 <div class="Center" id="Center">
 85     <ul>
 86  
 87         <li>
 88             <span id="img3" class="nn3">666</span>
 89             <!--<img id="img3" src="./images/82.jpg" width="460" height="370"/>-->
 90         </li>
 91         <!--<li><img id="img2" src="./images/81.jpg" width="460" height="370"/></li>-->
 92         <!--<li><img id="img1" src="./images/80.jpg" width="460" height="370"/></li>-->
 93  
 94         <li><img id="img3" src="./images/82.jpg" width="460" height="370"/></li>
 95         <li><img id="img2" src="./images/81.jpg" width="460" height="370"/></li>
 96         <li><img id="img1" src="./images/80.jpg" width="460" height="370"/></li>
 97     </ul>
 98     <div class="Line" id="Line">
 99         <div class="circle circle1 circle2" id="circle"></div>
100         <div class="circle"></div>
101         <div class="circle circle1"></div>
102     </div>
103 </div>
104 <script src="jquery-1.12.2.min.js"></script>
105 <script>
106     var box1 = document.getElementById('Line');// 横线
107     var circle = document.getElementById('circle');//圆心
108     var Center = document.getElementById('Center');//圆心
109     var boxX;
110     $(window).on("mousedown", function () {// 监听 按下、移动、离开
111 //        console.log(box1);
112         $(Center).on("mousemove", function (event) {
113             //让mask跟着 鼠标的在盒子中的位置移动
114             var event = event || window.event;
115             //鼠标在页面上的位置
116             var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
117             //计算鼠标在盒子中的位置
118             boxX = pageX - box1.offsetLeft;// 第一张开始的位置
119             $(circle).css({left: boxX + 'px'}); // 圆圈在屏幕中的位置（动态改变）
120             if (boxX > 50 && boxX < 205) {
121                 var boX = boxX - 205 > 0 ? 0 : Math.abs(boxX - 205);// 到第1个点判断绝对值
122                 var boX2 = boxX - 50;// 到第1个点判断绝对值
123                 if (boX < 155 && boX > 0) {
124 //                    console.log("点所在的位置:" + boX);
125 //                    console.log(boX2 / 155);
126                     $("#img1").css({opacity: boX / 155});//改变图片透明度 1-0   0-230
127                     $("#img2").css({opacity: boX2 / 155});//改变图片透明度 0-1  0-230
128                     $("#img3").css({opacity: 0});//改变图片透明度 0 - 0         0-230
129                 }
130             } else if (boxX > 204 && boxX < 255) {
131                 $("#img1").css({opacity: 0});//改变图片透明度 0  0-230
132                 $("#img2").css({opacity: 1});//改变图片透明度 1  0-230
133                 $("#img3").css({opacity: 0});//改变图片透明度 0  0-230
134             } else if (boxX > 254 && boxX < 410) {
135                 var boX3 = boxX - 410 > 0 ? 0 : Math.abs(boxX - 410);// 到第1个点判断绝对值
136                 var boX4 = boxX - 255;// 到第1个点判断绝对值
137 //                console.log(boX3);
138                 if (boX3 < 155 && boX3 > 0) {
139 //                    console.log("点所在的位置:" + boX);
140 //                    console.log(boX4 / 155);
141                     $("#img1").css({opacity: 0});//改变图片透明度 0-0            230-460
142                     $("#img2").css({opacity: boX3 / 155});//改变图片透明度 1-0   230-460
143                     $("#img3").css({opacity: boX4 / 155});//改变图片透明度 0 - 1 230-460
144                 }
145  
146             } else if (boxX > 409) {
147                 $("#img1").css({opacity: 0});//改变图片透明度 0  0-230
148                 $("#img2").css({opacity: 0});//改变图片透明度 0  0-230
149                 $("#img3").css({opacity: 1});//改变图片透明度 1  0-230
150             } else {
151                 $("#img1").css({opacity: 1});
152                 $("#img2").css({opacity: 0});
153                 $("#img3").css({opacity: 0});
154             }
155             if (boxX > 440) {
156 //                console.log(2);
157                 $(circle).css({left: 440 + 'px'}); // 圆圈在屏幕中的位置（动态改变）
158             }
159         });
160  
161  
162     });
163     window.addEventListener("mouseup",function(){
164 //        console.log("抬起");
165         if (boxX > 0 && boxX < 115) {
166 //            console.log(boxX);
167             $("#img1").animate({
168                 opacity: '1'
169             }, 1000);
170             $("#img2").animate({
171                 opacity: '0'
172             }, 1000);
173             $("#img3").animate({
174                 opacity: '0'
175             }, 1000);
176             $(circle).animate({
177                 left: "0px"
178             }, 1000);
179 //            console.log(3);
180         } else if (boxX > 115 && boxX < 230) {
181             $("#img1").animate({
182                 opacity: '0'
183             }, 1000);
184             $("#img2").animate({
185                 opacity: '1'
186             }, 1000);
187             $("#img3").animate({
188                 opacity: '0'
189             }, 1000);
190             $(circle).animate({
191                 left: "230px"
192             }, 1000);
193         }else if (boxX > 230 && boxX < 345) {
194             $("#img1").animate({
195                 opacity: '0'
196             }, 1000);
197             $("#img2").animate({
198                 opacity: '1'
199             }, 1000);
200             $("#img3").animate({
201                 opacity: '0'
202             }, 1000);
203             $(circle).animate({
204                 left: "230px"
205             }, 1000);
206         }else if (boxX > 345 && boxX < 460) {
207             $("#img1").animate({
208                 opacity: '0'
209             }, 1000);
210             $("#img2").animate({
211                 opacity: '0'
212             }, 1000);
213             $("#img3").animate({
214                 opacity: '1'
215             }, 1000);
216             $(circle).animate({
217                 left: "440px"
218             }, 1000);
219         }
220         $(Center).off("mousemove");//解绑事件
221     });
222     $(window).on("mouseup", function () {
223 //        onmouseup
224         console.log("鼠标抬起");
225         $(Center).off("mousemove");//解绑事件
226     });
227  
228 </script>
229 </body>
230 </html>
滑动 改变渐变切换图片

滑动改变渐变切换图片
