前端demo_前端简易小demo页面logo漂浮

废话少说，直接简单粗暴地上干货！

实现效果：
logo在浏览器页面漂浮，鼠标覆盖暂停，鼠标移走继续漂浮。

适用场景：

经常性出现在一些网站上有时候漂浮的是代表性的官徽有时候是广告。当你鼠标覆盖上去时，能够点击进行链接的跳转。

效果图如下：

主要的css代码如下：

#box{    position: absolute;    top: 10px;    left: 10px;    width: 100px;    height: 80px;    background: url("./images/baike.jfif"),no-repeat;    border: 1px solid red;    background-size: 100px;}

主要的html的body代码如下：

<div id="box">div>

jquery代码如下：(其实js的也差不多异曲同工之妙 主要是理解内部逻辑即可)

里头有详细的注释，方便大家的阅读。(嘿嘿嘿我还是挺好的，有注释的习惯。)

function run(){    var x = $("#box").offset().left;//logo的起始x轴位置    var y = $("#box").offset().top;//logo起始的y轴位置    var boxwidth=$("#box").width();//logo的宽      var boxheight=$("#box").height();//logo的高      var winwidth=$(window).width();//页面的宽      var winheight=$(window).height();//页面的高      var max=10;//设置视觉差      var winx=winwidth-boxwidth-max;//logo到的右边界      var winy=winheight-boxheight-max;//logo到的下边界      var gox=true;//默认向左移动      var goy=true;//默认向下移动      var t = setInterval(function(){          if(gox==true){              $("#box").css("left",x=x+5);          }if(gox==false){              $("#box").css("left",x=x-5);          }          if(x<=0){//到达左边界              gox=true;          }if(x>=winx){//到达右边界              gox=false;          }          if(goy==true){              $("#box").css("top",y=y+5);          }if(goy==false){              $("#box").css("top",y=y-5);          }          if(y<=0){//到达上边界              goy=true;          }if(y>=winy){              goy=false;//到达下边界          }      },100)      $("#box").hover(function(){ //鼠标覆盖上去，清除计时器达到暂停漂浮的效果        clearInterval(t);    })    $("#box").mouseout(function(){ //移开鼠标又开始漂浮      run();    })  }    run();

至此，我们想要实现的漂浮logo就到此结束了，其实没有很难。可能刚学js的小伙伴看到jquery之后有点不知所措。其实代码这种东西，不管是什么语言，都是要理解内部逻辑为主，所以我很好的把注释给大家备注上，就是希望不要因为代码问题让大家不清楚里头逻辑。

此致敬上！互勉！