首页 > 代码库 > 新手学js的效果图1---（ 淘宝等商城货物查看特效）
新手学js的效果图1---（ 淘宝等商城货物查看特效）
本人结合之前所学一起写了，多个特效，只是新手自己瞎鼓捣的，思路清晰，具体实现的货物放大镜等，替换当中的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="http://www.mamicode.com/img/1.jpg" width=‘420px‘ height="300px" style="display:block;"> 20 <img src="http://www.mamicode.com/img/2.jpg" width=‘420px‘ height="300px"> 21 <img src="http://www.mamicode.com/img/3.jpg" width=‘420px‘ height="300px"> 22 <img src="http://www.mamicode.com/img/4.jpg" width=‘420px‘ height="300px"> 23 <img src="http://www.mamicode.com/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="http://www.mamicode.com/img/1.jpg" style="display:block;" width="1260" height="900"> 34 <img src="http://www.mamicode.com/img/2.jpg" width="1220" height="900"> 35 <img src="http://www.mamicode.com/img/3.jpg" width="1220" height="900"> 36 <img src="http://www.mamicode.com/img/4.jpg" width="1220" height="900"> 37 <img src="http://www.mamicode.com/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>
新手学js的效果图1---（ 淘宝等商城货物查看特效）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。