原生js 放大镜特效

最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突,

调整冲突的需要修改的地方又太多,修改起来得不偿失,

故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突!

下面介绍一下代码及实现过程:

首先,创建fangda.html文件

在文件头部的<head></head>中添加文件的css样式,即:

<style type="text/css"> 
#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px; border:2px solid red;} 
#div1 img{width:304px; height:222px;} 
#div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;} 
.show { width:100%; height:100%; background:red; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; } 
#div2 {width:304px; height:222px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;} 
#img1 { position:absolute;} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>JavaScript 图片放大代码</title>

设置,显示在页面的内容

<body> 
<div id="div1"> 
<img src="images/big/1.jpg" /> <!-- 本地图片路径 -->
<span></span> <!-- 鼠标滑动 放大区域 -->
<div class="show"></div> 
</div> 
<div id="div2"> <!-- 展示放大后的图片 -->
<img id="img1" src="images/big/1.jpg" /> <!-- 本地大图片路径 -->
</div> 
</body>

然后,添加js事件效果,添加在<head></head>中

<script type="text/javascript">

//通过页面加载事件,使页面加载完毕自动执行 

window.οnlοad=function () 
{ 
var oDiv=document.getElementById('div1'); 
var oShow=oDiv.getElementsByTagName('div')[0]; 
var oSpan=oDiv.getElementsByTagName('span')[0]; 
var oImg=document.getElementById('img1'); 
oShow.οnmοuseοver=function() 
{ 
oSpan.style.display='block'; 
oImg.parentNode.style.display='block'; 
}; 
oShow.οnmοuseοut=function() 
{ 
oSpan.style.display='none'; 
oImg.parentNode.style.display='none'; 
}; 
oShow.οnmοusemοve=function(ev) 
{ 
var oEvent=ev||event; 
var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2; 
var y=oEvent.clientY-oDiv.offsetTop-oSpan.offsetHeight/2;

//获得具体坐标

if(x<0) 
{ 
x=0; 
} 
else if(x>oShow.offsetWidth-oSpan.offsetWidth) 
{ 
x=oShow.offsetWidth-oSpan.offsetWidth; 
} 
if(y<0) 
{ 
y=0; 
} 
else if(y>oShow.offsetHeight-oSpan.offsetHeight) 
{ 
y=oShow.offsetHeight-oSpan.offsetHeight 
} 

oSpan.style.left=x+'px'; 
oSpan.style.top=y+'px'; 
var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); 
var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); 
var oImgparent=oImg.parentNode; 
oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; 
oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; 
}; 
}; 
</script> 

这样就实现了,图片移上后的放大效果,同时由于没有引入其他的插件,移植性比较好,

可以通过更改较少的代码,就较好地规避在其他项目和商城中的冲突。

但缺点没有引入插件后效果华丽,加载页面没有引入插件的快,

可以考虑在这个页面做一个缓存,增加用户二次访问速度!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的原生JS实现放大镜功能的代码: HTML: ``` <div class="container"> <img src="image.jpg" alt="product image" id="product-image"> <div class="magnifier"></div> </div> ``` CSS: ``` .container { position: relative; } .magnifier { position: absolute; width: 200px; height: 200px; border: 1px solid #ccc; display: none; pointer-events: none; background-repeat: no-repeat; background-size: 400px 400px; background-position: 0 0; } ``` JS: ``` const container = document.querySelector('.container'); const magnifier = document.querySelector('.magnifier'); const productImage = document.querySelector('#product-image'); container.addEventListener('mousemove', e => { const containerRect = container.getBoundingClientRect(); const x = e.clientX - containerRect.left; const y = e.clientY - containerRect.top; const magnifierSize = 200; const imageWidth = productImage.width; const imageHeight = productImage.height; const ratioX = imageWidth / containerRect.width; const ratioY = imageHeight / containerRect.height; const bgPosX = -x * ratioX + magnifierSize / 2; const bgPosY = -y * ratioY + magnifierSize / 2; magnifier.style.display = 'block'; magnifier.style.left = `${x - magnifierSize / 2}px`; magnifier.style.top = `${y - magnifierSize / 2}px`; magnifier.style.backgroundImage = `url(${productImage.src})`; magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`; }); container.addEventListener('mouseleave', () => { magnifier.style.display = 'none'; }); ``` 这段代码会在鼠标移动到图片上时,显示一个放大镜,并在放大镜内显示鼠标所在位置的图片放大后的部分。当鼠标移开图片时,放大镜会隐藏。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JSON_L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值