先来张效果图:
这个特效是跟着慕课网上的视频学的,视频链接如下:https://www.imooc.com/learn/32
源码和技术点已经上传到附件,有需要的可以查看、下载。
下面直接上代码(PS:代码中的注释是根据个人理解添加的,并不是老师原有的注释):
页面结构:
<div id="demo"> <!--左侧小图片区域--> <div id="small-box"> <div id="mark"></div><!--左侧可以点击区域,类似于遮罩层,让鼠标一直在这个区域上移动。--> <div id="float-box"></div><!--左侧放大镜区域--> <img src="macbook-small.jpg"/> </div> <!--右侧大图片区域--> <div id="big-box"> <img src="macbook-big.jpg"/> </div> </div>
CSS样式:
<style> * { margin: 0; padding: 0 } #demo { display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #small-box { position: relative; z-index: 1; } #float-box { display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; } #mark { position: absolute; display: block; width: 400px; height: 255px; background-color: #fff; filter: alpha(opacity=0); opacity: 0; z-index: 10; cursor:move; } #big-box { display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1;; } #big-box img { position: absolute; z-index: 5 } </style>
JS代码:
window.onload=function(){ var demoObj = document.getElementById("demo");//整个div所在对象 var smallBoxObj = document.getElementById("small-box");//左侧小图片区域 var markObj = document.getElementById("mark");//左侧可以点击区域 var floatBoxObj = document.getElementById("float-box");//左侧放大镜区域 var bigBoxObj = document.getElementById("big-box");//右侧大图片区域 var bigBoxImageObj = bigBoxObj.getElementsByTagName("img")[0]; //当鼠标进入到mark区域时,放大镜显示,大图片区域显示 markObj.onmouseover=function(){ floatBoxObj.style.display="block"; bigBoxObj.style.display="block"; }; //当鼠标离开mark区域时,放大镜隐藏,大图片区域也隐藏 markObj.onmouseout = function(){ floatBoxObj.style.display="none"; //bigBoxObj.style.display="none"; }; //当鼠标在mark区域移动时,放大镜和大图片区域根据鼠标的移动而移动 markObj.onmousemove = function(ev){ //1、先计算放大镜的移动情况 var _event = ev || window.event; /*使用这种写法,鼠标图标一直在放大镜区域的左上角,不太美观,所以改成让其在放大镜区域的中间显示,也就是offsetWidth、offsetHeight的一半 var left = _event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft; var top = _event.clientY - demoObj.offsetTop - smallBoxObj.offsetTop; */ var left = _event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft - floatBoxObj.offsetWidth/2; var top = _event.clientY - demoObj.offsetTop - smallBoxObj.offsetTop - floatBoxObj.offsetHeight/2; //1.1解决放大镜出界问题:离开smallBox所在区域 //左侧出界:左侧边界的offsetLeft(_event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft)比放大镜的offsetWidth/2还小时,为了满足“鼠标一直在中间显示”,此时放大镜将超出边界显示,此时让其left为0,与左侧边界重合 //右侧出界:floatBoxObj必须markObj所在区域之内显示,当floatBoxObj的右侧不在markObj区域内时,右侧将出界,那么left应该是markObj的宽度与floatBoxObj宽度之差(在markObj或smallBoxObj的区域之内都可以,只要不超出这个区域的边界即可,因为左侧是在markObj上面移动,所以这里用markObj) if(left<0){ left=0; }else if(left>(markObj.offsetWidth-floatBoxObj.offsetWidth)){ //console.log("333333333333"); left = markObj.offsetWidth-floatBoxObj.offsetWidth; } //同理解决高度出界的问题 if(top<0){top=0;} else if(top>(markObj.offsetHeight-floatBoxObj.offsetHeight)){ top = markObj.offsetHeight-floatBoxObj.offsetHeight; } //console.log("left="+left+"\ttop="+top); //放大镜区域所在位置 floatBoxObj.style.left = left+"px"; floatBoxObj.style.top = top+"px"; //2、在大图片区域显示图片 //(????计算方法没太懂) var percentX = left / (markObj.offsetWidth - floatBoxObj.offsetWidth); var percentY = top / (markObj.offsetHeight - floatBoxObj.offsetHeight); bigBoxImageObj.style.left = -percentX * (bigBoxImageObj.offsetWidth - bigBoxObj.offsetWidth) + "px"; bigBoxImageObj.style.top = -percentY * (bigBoxImageObj.offsetHeight - bigBoxObj.offsetHeight) + "px"; }; };
在大图上显示那块儿没太懂,学习视频里面讲的也没看懂,有看懂的还望告知,谢谢!
相关推荐
基于纯JS的图片放大镜特效封装插件源码。
图片放大镜特效-淘宝宝贝放大镜特效 有帮助 真实效果
js圆形放大镜网页特效
简单的jquery放大镜特效
js放大镜特效
基于ArcGIS api上实现地图操作特效,包括透镜、放大镜、卷帘功能 阅读源码快速了解实现思路 有问题q-q-541247221
js,放大镜 html特效 浏览图片很好效果
涉及图片切换、滤镜、放大镜、指定图片点击跳跃。提供学习参考
放大镜特效代码介绍:里内容里的识别含义很时候新手、基础类朋友学习!
纯JS实现的图片放大镜特效封装插件.zip
本文实例为大家分享了js实现放大镜特效的具体代码,供大家参考,具体内容如下 掌握页面元素定位和移动 放大镜关键原理:鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置定位大图片的相应位置 技术点:事件捕获...
收集了各种放大镜特效。经测试效果还不错。
仿淘宝展品细节展示放大镜特效是用于产品放大详情预览效果,更小内存。
本文实例为大家分享了javascript实现放大镜特效的具体代码,供大家参考,具体内容如下 我们在逛pc端商城时,鼠标放到商品上经常会看到一个类似放大镜效果的蒙层, <!DOCTYPE html> <html> <head> &...
实现效果: 多款jquery图片放大镜特效,适用于商城网站,多款放大镜的效果,展示商品的信息是很好的,或者在个人博客中也可以使用放大镜的效果,展示自己的相片!
主要为大家详细介绍了原生js简单实现放大镜特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JS网页图片放大镜特效.txt
JS网页图片放大镜特效.pdf