本人结合之前所学一起写了，多个特效，只是新手自己瞎鼓捣的，思路清晰，具体实现的货物放大镜等，替换当中的img地址就可以查看特效
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>卖娃娃</title>
6 <style>
7 #big{width:420px;height:300px;border: 1px solid #999;}
8 #fdj{width:100px;height: 100px;border:1px solid red;position: absolute;background:blue;opacity:0.2;display: none;}
9 #big img{display:none;}
10 #small{width:420px;height:40px;}
11 .bt{float:left;width:80px;height:40px;border:1px solid red;margin-left:2px;text-align:center;line-height:40px;font-size: 20px;}
12 #bbig{width:400px;height:400px;position:absolute;top:8px;left:440px;overflow: hidden;display: none;}
13 #bbig img{display:none;}
14 </style>
15 </head>
16 <body>
17 <div id="big">
18 <div id="fdj"></div>
19 <img src="./img/1.jpg" width=‘420px‘ height="300px" style="display:block;">
20 <img src="./img/2.jpg" width=‘420px‘ height="300px">
21 <img src="./img/3.jpg" width=‘420px‘ height="300px">
22 <img src="./img/4.jpg" width=‘420px‘ height="300px">
23 <img src="./img/5.jpg" width=‘420px‘ height="300px">
24 </div>
25 <div id="small">
26 <div class="bt" style="background:lightgreen;">性感</div>
27 <div class="bt" >诱惑</div>
28 <div class="bt" >纯洁</div>
29 <div class="bt" >妖艳</div>
30 <div class="bt" >可爱</div>
31 </div>
32 <div id="bbig">
33 <img src="./img/1.jpg" style="display:block;" width="1260" height="900">
34 <img src="./img/2.jpg" width="1220" height="900">
35 <img src="./img/3.jpg" width="1220" height="900">
36 <img src="./img/4.jpg" width="1220" height="900">
37 <img src="./img/5.jpg" width="1220" height="900">
38 </div>
39 </body>
40 <script>
41 //获取图片
42 var imgs = document.getElementById(‘big‘).getElementsByTagName(‘img‘);
43 //获取图片下的div
44 var divs = document.getElementById(‘small‘).getElementsByTagName(‘div‘);
45 //获取放大的图片
46 var bimgs = document.getElementById(‘bbig‘).getElementsByTagName(‘img‘);
47 //获取放大镜的图片
48 var bbig = document.getElementById(‘bbig‘);
49 //定义初始值
50 var m = 1;
51 //鼠标放进下面的标题停止，离开开始
52 for(var i=0;i<divs.length;i++){
53 (function(i){
54 divs[i].onmouseover=function(){
55 cImg(i);
56 cDiv(i);
57 cBbig(i);
58 clearInterval(timer);
59 m=i+1;
60 }
61 divs[i].onmouseout=function(){
62 timer = setInterval(run,2000);
63 }
64 })(i);
65 }
66 //定时播放
67 var timer = setInterval(run,2000);
68 //定义播放的函数
69 function run(){
70 if(m>4){
71 m = 0;
72 }
73 cImg(m);
74 cDiv(m);
75 cBbig(m);
76 m++;
77 }
78 //图片轮放
79 function cImg(n){
80 for(var i=0;i<imgs.length;i++){
81 imgs[i].style.display = "none";
82 }
83 imgs[n].style.display = "block";
84 }
85 //标题轮放
86 function cDiv(n){
87 for(var i=0;i<divs.length;i++){
88 divs[i].style.background = "none";
89 }
90 divs[n].style.background = "lightgreen";
91 }
92 //放大的图轮放
93 function cBbig(n){
94 for(var i=0;i<bimgs.length;i++){
95 bimgs[i].style.display = "none";
96 }
97 bimgs[n].style.display = "block";
98 }
99 //鼠标移进去停止,出来继续轮放
100 big.onmouseover = function(){
101 fdj.style.display = "block";
102 bbig.style.display = "block";
103 clearInterval(timer);
104 }
105 big.onmouseout = function(){
106 fdj.style.display = "none";
107 bbig.style.display = "none";
108 timer = setInterval(run,2000);
109 }
110 /* 放大镜 */
111 big.onmousemove=function(e){
112 var e = e || window.event;
113 this.style.cursor="move";
114 var fx = e.clientX - big.offsetLeft;
115 var fy = e.clientY - big.offsetTop;
116
117 document.title = fx+":"+fy;
118
119 fdj.style.left = (fx-42)+"px";
120 fdj.style.top = (fy-42)+"px";
121 //判断光标位置决定放大镜的位置,不出边框
122 if(fx<50){
123 fdj.style.left = 8+"px";
124 }
125 if(fx>370){
126 fdj.style.left = 328+"px";
127 }
128 if(fy<50){
129 fdj.style.top = 8+"px";
130 }
131 if(fy>250){
132 fdj.style.top = 208+"px";
133 }
134 var bigfx = parseInt(fdj.style.left);
135 var bigfy = parseInt(fdj.style.top);
136 console.log(bigfy);
137 console.log(bigfx);
138 //放大镜里显示的东西按倍数
139 bbig.scrollTop = (bigfy-8)*3;
140 bbig.scrollLeft = (bigfx-8)*3;
141 // bbig.style.display = ‘block‘;
142 console.log(‘--------‘);
143 console.log(bbig.scrollTop);
144 console.log(bbig.scrollLeft);
145 // console.log(fdj.style.top);
146 }
147
148
149
150 </script>
151 </html>
时间： 2024-08-09 02:20:09