html 放大镜 js,原生js实现简单的放大镜效果

前言:

相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧;

(1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成。

html:

12.png

bV6Qex?w=784&h=613

第一部分的原理是:设置box的background为需要放大的图片,同时背景的宽高为100%。再将box的宽高设为300px,这样背景图片就可以撑满box了。然后通过监听box的mousemove事件,控制红色小框块的移动。这个红色小框块就是要放大的地方。

第二部分的原理是:设置big里面的img为box的宽度的3倍(这里的3倍就是放大镜的放大倍数,当然这个值是可以自由选择的。)。同时big块的宽高为350px,用来限制img的显示。然后通过移动img的left,top来达到放大镜的效果。

css代码:

html,body {

margin: 0;

padding:0;

}

#box{

width: 300px;

height: 300px;

position: relative;

background: url(12.png);

background-size:100% 100%;

}

#box #small{

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

background: red;

opacity: 0.6;

}

#big{

width: 350px;

height: 350px;

overflow: hidden;

position: relative;

display: none;

}

#big img{

width: 900px;

height: 900px;

position: absolute;

}

(2)js部分:

var box = document.querySelector('#box');

var small = document.querySelector('#small');

var big = document.querySelector('#big');

var img = document.querySelector('#imgs');

//监听box的mousemove事件

box.onmousemove = function(e){

//获取鼠标的x、y坐标。为什么要减去50呢?为了让鼠标刚好在small红色小方块的中心。

var top = e.clientY-50;

var left = e.clientX-50;

//限制small小方块移出box的范围

if(top > 200){top = 200};

if(top < 0){top = 0};

if(left > 200){left = 200};

if(left < 0){left = 0};

//动态设置small小方块的位置,让小方块跟随鼠标移动

small.style.left = left + 'px';

small.style.top = top + 'px';

//让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以(-3)呢?因为big里面的大图是box的3倍。鼠标在box上面向右移动1px,那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。

img.style.top = top*(-3) + 'px';

img.style.left = left*(-3) + 'px';

}

//监听box的onmouseenter事件

box.onmouseenter = function(e){

//当鼠标进入box范围的时候,显示放大效果

big.style.display='block';

}

//监听box的onmouseleave 事件

box.onmouseleave = function(e){

//当鼠标移出box范围的时候,隐藏放大效果

big.style.display='none';

}

好了,css+js实现放大镜的功能到这里就完成了。很简单吧。不过这只是简单的实现,还有使用canvas实现的方法。

不能只看不动手的喔,自己动手敲一遍,就好理解很多了。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值