JavaScript如何制作放大镜效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
成都创新互联服务项目包括猇亭网站建设、猇亭网站制作、猇亭网页制作以及猇亭网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,猇亭网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到猇亭省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
实现原理:使用2个div,里面分别放大图片和小图片,在小图片上应该还有一个遮罩层,通过定位遮罩层的位置来定位大图片的相对位置,而且,遮罩层的移动应该和大图片的移动方向相反
关键: 大图片和小图片大小比例应该和遮罩层的大小和放大显示区域的比例相同;
难点: 计算遮罩层来显示相应大图片的位置
话不多说直接看代码
代码
html:
<div id="small"> <div id="pic1"> <img src="62-130501163925.jpg" alt=""> </div> <div id="mask"></div> </div> <div id="big"> <div id="pic2"> <img src="62-130501163925.jpg" alt=""> </div> </div>
css
#small{ width: 500px; height: 312px; position: absolute; left: 20px; top: 20px; } #pic1{ position: absolute; left: 0px; top: 0px; } #pic1 img{ width: 100%; height: 100%; } #big{ width: 200px; height: 200px; position: absolute; right: 50px; top: 50px; border: 1px solid blue; overflow: hidden; } #pic2{ width: 1000px; height: 625px; position: absolute; left: 0; top: 0; } #pic2 img{ width: 100%; height: 100%; } #mask{ width: 100px; height: 100px; background: black; opacity: 0.3;/*让遮罩层看起来透明*/ filter: alpha(opacity = 30);/*兼容不同的浏览器*/ position: absolute; display: none; }
js
window.onload = function(){//文档内容加载完之后再执行 //当鼠标移入小图片,显示遮罩层和放大的区域 $('small').onmouseenter = function(){ $('mask').style.display = 'block'; $('big').style.display='block'; } //鼠标移出时,隐藏遮罩层和放大的区域 $('small').onmouseleave = function(){ $('mask').style.display='none'; $('big').style.display="none"; } //鼠标移动 $('small').onmousemove = function(ev){ var e = ev || window.event; //计算鼠标的位置,并让鼠标显示在遮罩层的中间 var l = e.clientX - $('small').offsetLeft - 50; var t = e.clientY - $('small').offsetTop -50; //别让遮罩层移出图片 if(l <= 0){ l = 0; } if(l >= 500 - 100){ l = 400; } if(t <= 0){ t = 0; } if(t >= 312 - 100){ t = 212; } //遮罩层的移动 $('mask').style.left = l + 'px'; $('mask').style.top = t + 'px'; //通过遮罩层移动,来计算出放大后图片的显示区域 $("pic2").style.left = -$("mask").offsetLeft * 2 + 'px'; $("pic2").style.top = -$("mask").offsetTop * 2 + 'px'; } } //为了更容容易的获取id function $(id){ return document.getElementById(id); }
感谢各位的阅读!看完上述内容,你们对JavaScript如何制作放大镜效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。
文章名称:JavaScript如何制作放大镜效果
本文来源:https://www.cdcxhl.com/article12/jgjhgc.html
成都网站建设公司_创新互联,为您提供App开发、用户体验、App设计、响应式网站、小程序开发、动态网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联