原生js 放大镜特效

最新推荐文章于 2023-09-14 19:35:46 发布
最新推荐文章于 2023-09-14 19:35:46 发布
阅读量733 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/json_ligege/article/details/51158687
版权

最近在做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>

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

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

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

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

JSON_L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生JS经典案例特效
10-26
30多套JavaScript的案例库，动画效果。360度全景展示效果，back_评分，back_图片滚动播放，JS简易年历，slide上下滚动条，放大镜简单版，竖排导航，土豆右下角菜单悬浮效果，照片墙一多实例演示_files，back_瀑布流，back_购物车等等..........
一些原生的js小特效
InLett_yj的博客
08-12 877
一.这是一个鼠标跟随特效(使用画布) html部分` ` js部分 window.onload = function(){ C = Math.cos; S = Math.sin; U = 0; w = window; j = document; d = j.getElementById('c'); c = d.getContext('2d')...
超详细原生js实现一个放大镜效果
梅花寺
11-02 622
以上就是实现一个放大镜的全部内容附上gitHub地址：欢迎来踩整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。 **图片移动的关键:** 移动的图片使用：绝对定位（注意子绝父相。
原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
weixin_34250434的博客
08-10 424
         在制作网页过程中，我们可能会遇到各种常用的经典网页特效，比如Banner图片滚动、选项卡循环播放、右下角广告弹窗、评论提交展示、选项动态增删、剪刀石头布小游戏等等等。。。是不是感觉都见到过这些场景、那些这些场景都是如何实现的呢？今天，小瑞老师就一口气把所有经典网页特效效果送给大家！！！          全部都是原生JS实现哦~~根本不需要什么JQuery、AngularJS等各...
原生js实现放大镜效果
qq_42356513的博客
02-20 563
记录一次原生js实现放大镜效果。 效果图 设计思路 基本架子 先弄一个容器放正常的图片,中间那个蒙版(稍微有点透明的白色正方形),肯定给绝对定位,动态调left，top值, 所以子绝父相,父容器给相对定位。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
原生js简单实现放大镜特效
10-19
在网页设计中，为了提供更好的用户体验，经常需要实现一些交互效果，例如放大镜特效。这种特效主要用于产品展示，用户可以通过鼠标移动来查看商品的细节。本文将详细介绍如何使用原生JavaScript来实现一个简单的放大...
原生JS实现的放大镜特效示例【测试可用】
10-17
主要介绍了原生JS实现的放大镜特效,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
原生JS实现放大镜效果
weixin_42678796的博客
07-19 228
效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
原生JS制作放大镜详细代码
最新发布
qq_45587547的博客
09-14 118
原生JS制作放大镜详细代码
js原生 动态粒子星空特效
12-03
简单的粒子星空特效，使用纯原生js 没有使用任何插件，简单易懂，一看就明白，自己对js+canvas的一些简单的理解
原生js实现图片放大镜效果
03-30
原生js实现图片放大镜效果，经典案例，注释详细，源于分享
原生canvas+js实现的粒子特效
09-11
纯JavaScript+canvas写的放射状圆点粒子特效，黑色背景。 摘要必须大于50个字! 摘要必须大于50个字! 摘要必须大于50个字!
原生js实现放大镜
Irlia_的博客
11-28 495
原生js实现放大镜> html部分 <div class="container" id="glassone"> <div class="left"> <!-- 左边显示图片区域 --> <div class="show-box"> <img src="./img/show_1.jpg" alt="显示图片"> &lt
原生js实现拖拽特效
weixin_45781661的博客
04-20 294
原生js实现拖拽特效 效果图和代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
原生JS实现飘浮关键词特效
越陌度阡
07-27 833
分享一个原生JS实现的飘浮关键词的效果，鼠标悬停可让关键词停止运动，点击关键词可跳转到对应的页面，效果如下： 实现的代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> .........
js原生实现放大镜
qq_52440306的博客
05-28 163
放大镜的特点 1，放大镜是一个可拖动div， 2，只能在父元素中拖动，不能越界； 3，显示器根据放大镜的移动显示相应区域的内容， 实现的思路 1，脱离文档流的元素才能拖动，子元素要相对父元素设置绝对定位； 2，显示器里面其实已经有一张图片了，这张图片和和需要查看的图片一模一样，不过设置的大小不同，这里设置的比例是6.25倍；放大镜的大小对应显示器的大小，放大镜里的内容和显示器里的内容是一样；等比放大； 3，当移动放大镜的时候，重新设置显示器里面图片的位置，方向是负的， 代码 <style>
原生JavaScript小特效
weixin_45072327的博客
08-10 261
这里背景图片命名格式为:纽扣1.png,纽扣2.png 最后有图片示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px;...
原生JS实现网页导航条特效
越陌度阡
06-02 3853
给大家分享一个用原生JS实现的比较实用的网页导航条特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现
用原生js写个放大镜功能
03-22
好的，以下是一个简单的原生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、付费专栏及课程。

余额充值