JS 原生: 放大镜
原理: 左边阴影在左边图片上从左到右移动的时候, 右边大框也在右边大图片上从左到右移动 (尽管在视觉, 原理和代码上是相反的); 所谓放大, 其实就是一张原本就很小的图对应一张原本就很大的图.
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- .small{
- width: 400px;
- height: 400px;
- position: relative;
- background: url(http://cdn.attach.qdfuns.com/notes/pics/201702/11/214206pk76vdieu5co7uwi.jpg) no-repeat center;
- border: 1px solid #ccc;
- }
- .small .inner{
- width: 100px;
- height: 100px;
- background: yellow;
- opacity: 0.5;
- filter: alpha(opacity=50);
- position: absolute;
- left:0;
- top:0;
- display: none;
- }
- .big{
- width: 400px;
- height: 400px;
- position: absolute;
- left:410px;
- top:0;
- overflow: hidden;
- border: 1px solid #ccc;
- display: none;
- }
- .big img{
- width: 200%;
- height: 200%;
- position: absolute;
- left:0;
- top:0;
- }
- </style>
- </head>
- <body>
- <div id="small" class="small">
- <div class="inner"></div>
- </div>
- <div id="big" class="big">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/11/214213x2oh86wpuuuzcuuc.jpg" alt=""/>
- </div>
- <script>
- var small=document.getElementById('small');
- var inner=small.getElementsByTagName('div')[0];
- var big=document.getElementById('big');
- var img=big.getElementsByTagName('img')[0];
- // 当鼠标移入 small 的时候, inner 和 big 显示
- small.onmouseover=function(){
- big.style.display='block';
- inner.style.display='block';
- };
- // 当鼠标在 small 移动的时候: 1) 鼠标在 inner 的中间 2)inner 跟随鼠标移动
- small.onmousemove=function(e){
- e=e||window.event;
- var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
- var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
- if(left<=0){
- left=0;
- }else if(left>=this.offsetWidth-inner.offsetWidth){
- left=this.offsetWidth-inner.offsetWidth
- }
- if(top<=0){
- top=0;
- }else if(top>=this.offsetHeight-inner.offsetHeight){
- top=this.offsetHeight-inner.offsetHeight
- }
- inner.style.left= left+'px';
- inner.style.top= top+'px';
- // 当 inner 移动的时候, 大图跟着一起移动, 并且, 大图和 inner 移动的方向相反;
- // 或者理解为: 左边阴影在图片上从左到右移动的时候, 右边大框也在大图片上从左到右移动 (尽管视觉上是相反的).
- img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
- img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
- };
- // 当鼠标移出的时候, inner 和 big 隐藏;
- small.onmouseout=function(){
- big.style.display='none';
- inner.style.display='none';
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40901/e8139a8b4d03597fd1f95806d834ab88.html