【纯原生JS】 我居然用onmouseover+onmouseout+onmousemove鼠标事件来实现了京东商品放大镜效果 明白了 原来还可以这么干 附上源代码文件
作者：极客小俊
公众号:同名
前言😃
商品的放大镜效果相信逛过商城的朋友应该都见过吧，代码逻辑其实也很简单!
只要你掌握了onmouseover+onmouseout+onmousemove以及事件对象和一点点的DOM操作就可以轻松几行JS代码实现出来!
准备工作 🧐
搞几张图片来当素材吧， 我这里准备的是一张大图 800x 800 小图450x450 就可以了
接下来直接上代码
HTML结构 ☘️
<div id="div1">
<!--小图-->
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="img/small.jpeg" longdesc="" />
</div>
<!--大图-->
<div class="big_pic">
<img src="img/big.jpeg" alt="" longdesc="" />
</div>
</div>
html布局结构的方式其实是有多种多样的，这也影响后期的js效果设计
CSS样式 🥳
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
#div1 { width:450px; height:450px; padding: 5px; border: 1px solid #ccc; position: relative; left: 50px; top:30px;}
#div1>.small_pic>.float_layer { width: 100px; height: 100px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1>.small_pic>.mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1>.small_pic>.mark:hover{ cursor: move;}
#div1>.big_pic { position: absolute; top: -1px; left: 480px; width:500px; height:500px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1>.big_pic>img { position:absolute; top: 0px; left: 0px; }
其实有时候觉得css还是很重要的，毕竟css写好了 对后期js的整体代码逻辑也有一定影响的 这一点大家注意哈! hohohoho 🥳🥳🥳
javascript代码逻辑
function getByClass(obj,cName){
var List=obj.getElementsByTagName("*");
var arr=[];
var i=0;
var len=List.length;
for(i=0;i<len;i++){
if(List[i].className===cName){
arr.push(List[i]);
}
}
return arr;
}
window.onload=function () {
var _div1=document.getElementById("div1");
var _mark=getByClass(_div1,'mark')[0];
var _floatLayer=getByClass(_div1,'float_layer')[0];
var _bigPic=getByClass(_div1,'big_pic')[0];
var _smallPic=getByClass(_div1,'small_pic')[0];
var _Img=_bigPic.getElementsByTagName("img")[0];
_mark.onmouseover=function(){
_floatLayer.style.display="block";
_bigPic.style.display="block";
}
_mark.onmouseout=function(){
_floatLayer.style.display="none";
_bigPic.style.display="none";
}
_mark.onmousemove=function(event){
var e=event || window.event;
var X=e.clientX-_div1.offsetLeft-_smallPic.offsetLeft-(_floatLayer.offsetWidth/2);
var Y=e.clientY-_div1.offsetTop-_smallPic.offsetTop-(_floatLayer.offsetHeight/2);
if(X<0){
X=0;
}
if(Y<0){
Y=0;
}
if(X>(_mark.offsetWidth-_floatLayer.offsetWidth)){
X=(_mark.offsetWidth-_floatLayer.offsetWidth);
}
if(Y>(_mark.offsetHeight-_floatLayer.offsetHeight)){
Y=(_mark.offsetHeight-_floatLayer.offsetHeight);
}
_floatLayer.style.left=X+'px';
_floatLayer.style.top=Y+'px';
var _Px=X/(_mark.offsetWidth-_floatLayer.offsetWidth);
var _Py=Y/(_mark.offsetHeight-_floatLayer.offsetHeight);
//大图移动
_Img.style.left=-_Px*(_Img.offsetWidth-_bigPic.offsetWidth)+'px';
_Img.style.top=-_Py*(_Img.offsetHeight-_bigPic.offsetHeight)+'px';
}
}
有兴趣的朋友可以直接下载代码去试试，修改一下图片就可以马上使用!! 😁😁 【方言: 就等你说要不要的!】
最终效果
如图
"👍点赞" "✍️评论" "💙收藏"
