滑动 改变渐变切换图片
Posted xiaozhu-zhu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滑动 改变渐变切换图片相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 /*.Center { 8 width: 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>
以上是关于滑动 改变渐变切换图片的主要内容，如果未能解决你的问题，请参考以下文章