第44天:鼠标移动放大效果

1、鼠标移动放大效果

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>鼠标移动放大效果</title>
  6     <style>
  7         .box{
  8             width: 350px;
  9             height: 350px;
 10             position: relative;
 11             margin: 100px auto;
 12             margin-left: 175px;
 13         }
 14         .box .small{
 15             width: 350px;
 16             height: 350px;
 17             border:1px solid #c1c1c1;
 18             position: absolute;
 19             left: 0;
 20             top:0;
 21             cursor: move;
 22         }
 23         .box .big{
 24             width: 450px;
 25             height: 450px;
 26             border: 1px solid #c1c1c1;
 27             position: absolute;
 28             left:360px;
 29             top:0;
 30             overflow: hidden;
 31             display: none;
 32         }
 33         .mask{
 34             width: 100px;
 35             height: 100px;
 36             background: rgba(255,255,0,0.4);
 37             position: absolute;
 38             top:0;
 39             left:0;
 40             display: none;
 41             cursor: move;
 42         }
 43         .big img{
 44             position: absolute;
 45             top:0;
 46             left:0;
 47         }
 48     </style>
 49 </head>
 50 <body>
 51     <div class="box" id="box">
 52         <div class="small">
 53             <img src="images/001.jpg" alt="">
 54             <div class="mask"></div>
 55         </div>
 56         <div class="big">
 57             <img src="images/0001.jpg" alt="">
 58         </div>
 59     </div>
 60 </body>
 61 </html>
 62 <script>
 63     var box=document.getElementById("box");
 64     var small=box.children[0];
 65     var big=box.children[1];
 66     var mask=small.children[1];
 67     var bigImg=big.children[0];//大盒子里的图片
 68     small.onmouseover=function(){//鼠标移入
 69         mask.style.display="block";
 70         big.style.display="block";
 71     }
 72     small.onmouseout=function(){//鼠标离开
 73         mask.style.display="none";
 74         big.style.display="none";
 75     }
 76 
 77     var x=0;
 78     var y=0;
 79     small.onmousemove=function(event){
 80         var event=event||window.event;
 81         //鼠标移动的x值=鼠标的位置-大盒子左距-遮罩宽度的一半
 82         var x=event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2;
 83         var y=event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
 84         //控制鼠标只能在盒子里面移动
 85         if(x<0){
 86             x=0;
 87         }else if(x>small.offsetWidth-mask.offsetWidth){
 88             x=small.offsetWidth-mask.offsetWidth;
 89         }
 90         if(y<0){
 91             y=0;
 92         }else if(y>small.offsetHeight-mask.offsetHeight){
 93             y=small.offsetHeight-mask.offsetHeight;
 94         }
 95         mask.style.left=x+"px";
 96         mask.style.top=y+"px";
 97         
 98         //大盒子移动的距离=小盒子移动距离*大盒子和小盒子的比例数
 99         bigImg.style.left=-x*big.offsetWidth/small.offsetWidth+"px";
100         bigImg.style.top=-y*big.offsetHeight/small.offsetHeight+"px";
101     }
102 </script>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

UILabel显示固定行数的问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1402
来自专栏杨龙飞前端

scrollto 到指定位置

3675
来自专栏前端说吧

JS-缓冲运动-对联型悬浮框

3035
来自专栏Alice

上边半透明的效果并且显示的是上一页的内容

项目介绍:首先上边显示的是透明的视图,透明度为0.8 这是一个vc 设置vc的view的背景颜色为clearcolor  上边是一个按钮,设置按钮的透明度为0....

1995
来自专栏河湾欢儿的专栏

文档宽高及窗口事件

onscroll:当滚动条滚动的时候触发 onresize:当窗口大小发生改变的时候触发

932
来自专栏谈补锅

记录下UIButton的图文妙用和子控件的优先显示

  UIButton的用处特别多,这里只记录下把按钮应用在图文显示的场景,和需要把图片作为按钮的背景图片显示场景;

883
来自专栏我和未来有约会

为UINavigationBar添加自定义背景

@implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRe...

1969
来自专栏前端知识分享

第49天:封装自己的scrollTop

scrollTop和scrollLeft scrollTop 被卷去的头部 当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离 二、页面滚动效果事件 windo...

1261
来自专栏vue学习

偏移量、客户区大小、视口大小、滚动大小、确定元素大小

1、偏移量 先讲几个偏移量属性: offsetHeight:元素在垂直方向上占用的空间大小;相当于border-top+padding-top+height...

1372
来自专栏hrscy

iOS瀑布流

1304

扫码关注云+社区

领取腾讯云代金券