首页 > 代码库 > 淘宝-京东放大镜效果
淘宝-京东放大镜效果
效果 
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜效果</title> 6 <style type="text/css"> 7 #div1 { 8 width: 180px; 9 height: 180px;10 position: relative;11 }12 #div1 img{13 display: block;14 }15 #div2{16 width: 80px;17 height: 80px;18 background: yellow;19 opacity: 0.5;20 filter:alpha(opacity=50);21 position: absolute;22 left: 0;23 top:0;24 display: none;25 }26 #div3{27 display: none;28 width: 300px;29 height: 300px;30 border: 1px solid black;31 position: absolute;32 left: 200px;33 top:0px;34 overflow: hidden;35 }36 #div3 img{37 display: block;38 position: absolute;39 left: 0px;40 top:0px;41 }42 </style>43 <script type="text/javascript">44 window.onload=function(){45 var oDiv1 = document.getElementById("div1");46 var oDiv2 = document.getElementById("div2");47 var oDiv3 = document.getElementById("div3");48 var oImg2 = document.getElementById("img2");49 oDiv1.onmouseover=function(){50 oDiv2.style.display = "block";51 oDiv3.style.display = "block";52 oDiv1.onmousemove=function(ev){53 var ev = ev || event;54 var l = ev.clientX - oDiv2.offsetWidth/2;55 var t = ev.clientY - oDiv2.offsetHeight/2;56 if(l<0){57 l = 0;58 }59 if(l>oDiv1.offsetWidth-oDiv2.offsetWidth){60 l = oDiv1.offsetWidth-oDiv2.offsetWidth;61 }62 if(t<0){63 t = 0;64 }65 if(t>oDiv1.offsetHeight-oDiv2.offsetHeight){66 t = oDiv1.offsetHeight-oDiv2.offsetHeight;67 }68 //计算大图的位置69 var scaleX = l/(oDiv1.offsetWidth-oDiv2.offsetWidth);70 oImg2.style.left = (oDiv3.offsetWidth-oImg2.offsetWidth)*scaleX+"px";71 var scaleY = t/(oDiv1.offsetHeight-oDiv2.offsetHeight);72 oImg2.style.top = (oDiv3.offsetHeight-oImg2.offsetHeight)*scaleY+"px";73 document.title = scaleX;74 oDiv2.style.left = l +"px";75 oDiv2.style.top = t +"px";76 }77 }78 oDiv1.onmouseout=function(){79 oDiv2.style.display = "none";80 oDiv3.style.display = "none";81 }82 }83 84 </script>85 </head>86 <body>87 <div id="div1">88 <img class="img" src="img/b2.jpg"/>89 <div id="div2"></div>90 </div>91 <div id="div3">92 <img id="img2" src="img/b1.jpg" alt="1" />93 </div>94 </body>95 </html>
淘宝-京东放大镜效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。