美文网首页
【纯原生JS】 我居然用onmouseover+onmouseo

【纯原生JS】 我居然用onmouseover+onmouseo

作者: 极客小俊 | 来源:发表于2022-07-09 17:37 被阅读0次

    ✍️作者:极客小俊
    😈公众号同名: 一个把逻辑思维转变为代码的技术博主

    【纯原生JS】 我居然用onmouseover+onmouseout+onmousemove鼠标事件来实现了京东商品放大镜效果 明白了 原来还可以这么干 附上源代码文件.png

    前言😃

    商品的放大镜效果相信逛过商城的朋友应该都见过吧,代码逻辑其实也很简单!
    只要你掌握了onmouseover+onmouseout+onmousemove以及事件对象和一点点的DOM操作就可以轻松几行JS代码实现出来!

    准备工作 🧐

    搞几张图片来当素材吧, 我这里准备的是一张大图 800x 800 小图450x450 就可以了

    素材.png

    接下来直接上代码

    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';
         }
     }
    
    

    有兴趣的朋友可以直接下载代码去试试,修改一下图片就可以马上使用!! 😁😁 【方言: 就等你说要不要的!】

    最终效果

    如图

    最终效果.gif image image

    如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!


    如果以上内容有任何错误或者不准确的地方,🤝🤝欢迎在下面 👇 留个言指出、或者你有更好的想法,欢迎一起交流学习❤️❤️❤️❤️❤️

    相关文章

      网友评论

          本文标题:【纯原生JS】 我居然用onmouseover+onmouseo

          本文链接:https://www.haomeiwen.com/subject/tdkibrtx.html