原生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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
javascript中的隐式调用
Feb 10 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
如何实现浏览器上的右键菜单
2006/07/10 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Python异常学习笔记
2015/02/03 Python
python中split方法用法分析
2015/04/17 Python
Python中的hypot()方法使用简介
2015/05/18 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python求前n个阶乘的和实例
2020/04/02 Python
python软件都是免费的吗
2020/06/18 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python如何解除一个装饰器
2020/08/07 Python
Python实现一个论文下载器的过程
2021/01/18 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
Python文件操作的面试题
2013/06/22 面试题
《三峡》教学反思
2014/03/01 职场文书
初中中等生评语
2014/12/29 职场文书
辞职信怎么写
2015/02/27 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js