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>
浙公网安备 33010602011771号