原生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 相关文章推荐
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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正则表达式使用的详细介绍
2013/04/27 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
详解React 元素渲染
2020/07/07 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
初步解析Python下的多进程编程
2015/04/28 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python pyheatmap包绘制热力图
2018/11/09 Python
想学python 这5本书籍你必看!
2018/12/11 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
pytorch构建多模型实例
2020/01/15 Python
python中re模块知识点总结
2021/01/17 Python
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
股票投资建议书
2014/05/19 职场文书
大学生应聘求职信
2014/05/26 职场文书
法学自荐信
2014/06/20 职场文书
家长会欢迎标语
2014/06/24 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书