原生JS实现的放大镜特效示例【测试可用】


Posted in Javascript onDecember 08, 2018

本文实例讲述了原生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="http://demo.3water.com/js/2017/html5-canvas-fangdajing-codes/s1.jpg" /> <!-- 本地图片路径 -->
<span></span> <!-- 鼠标滑动 放大区域 -->
<div class="show"></div>
</div>
<div id="div2"> <!-- 展示放大后的图片 -->
<img id="img1" src="http://demo.3water.com/js/2017/html5-canvas-fangdajing-codes/s1.jpg" /> <!-- 本地大图片路径 -->
</div>
</body>

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

<script type="text/javascript">
//通过页面加载事件,使页面加载完毕自动执行
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oShow=oDiv.getElementsByTagName('div')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];
var oImg=document.getElementById('img1');
oShow.onmouseover=function()
{
oSpan.style.display='block';
oImg.parentNode.style.display='block';
};
oShow.onmouseout=function()
{
oSpan.style.display='none';
oImg.parentNode.style.display='none';
};
oShow.onmousemove=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>

这样就实现了,图片移上后的放大效果,同时由于没有引入其他的插件,移植性比较好,可以通过更改较少的代码,就较好地规避在其他项目和商城中的冲突。

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

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

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

 原生JS实现的放大镜特效示例【测试可用】

感兴趣的朋友可以使用上述在线工具测试一下看看运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JavaScript多线程的实现方法
May 08 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 #Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
ES6的Fetch异步请求的实现方法
Dec 07 #Javascript
JavaScript this绑定过程深入详解
Dec 07 #Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 #Javascript
如何手动实现es5中的bind方法详解
Dec 07 #Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 #Javascript
You might like
使用PHP实现Mysql读写分离
2013/06/28 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vue的mixins属性详解
2018/03/14 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
python实现的各种排序算法代码
2013/03/04 Python
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python中PIL安装简单教程
2016/04/21 Python
django实现用户登陆功能详解
2017/12/11 Python
简单了解Django模板的使用
2017/12/20 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
为什么说python适合写爬虫
2020/06/11 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
2014年圣诞节促销方案
2014/03/14 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS