大岭山小程序定做_原生JS完成的扩大镜特效示例【测试可用】

原生JS实现的放大镜特效示例【测试可用】       这篇文章主要介绍了原生JS实现的放大镜特效,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了原生JS实现的放大镜特效。分享给大家供大家参考,具体如下:

最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突,

调整冲突的需要修改的地方又太多,修改起来得不偿失,

故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突!

下面介绍一下代码及实现过程:

<文件

在文件头部的 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="5-canvas-fangdajing-codes/s1.jpg" / !-- 本地图片路径 -- 
 span /span !-- 鼠标滑动 放大区域 -- 
 div /div 
 /div 
 div id="div2" !-- 展示放大后的图片 -- 
 img id="img1" src="5-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. unction()
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)
else if(x oShow.offsetWidth-oSpan.offsetWidth)
x=oShow.offsetWidth-oSpan.offsetWidth;
if(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代码运行工具:测试运行效果如下:

 

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

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


相关阅读