原生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 form 验证函数 弹出对话框形式
Jun 23 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vuex actions传递多参数的处理方法
2018/09/18 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
对Python3 序列解包详解
2019/02/16 Python
django认证系统 Authentication使用详解
2019/07/22 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
就业推荐表院系意见
2015/06/05 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript