jQuery移动漂浮窗口
html部分：
1 <div id="img1"><a href=""><img src="user_avator.png" alt=""></a></div>
css部分：
1 *{ 2 padding: 0; 3 margin: 0; 4 } 5 #img1{ 6 position: fixed; 7 z-index: 10; 8 left: 10px; 9 top: 100px; 10 }
jquery部分：
1 $(function(){ 2 var oLeft = 10; //初始左偏移量 3 var oTop = 100; //初始上偏移量 4 var time = 30; //漂浮时间，可能太慢，可以自己将时间改小调快点 5 var xon = true; //左右漂浮开关 6 var yon = true; //上下漂浮开关 7 var bodyW = $(window).width(); //浏览器可视宽度 8 var bodyH = $(window).height(); //浏览器可视高度 9 $(window).resize(function(){ 10 bodyW = $(window).width(); //浏览器变化时，浏览器可视宽度 11 bodyH = $(window).height(); //浏览器变化时，浏览器可视高度 12 }); 13 var imgW = $("#img1").outerWidth(); //漂浮物体的宽度 14 var imgH = $("#img1").outerHeight(); //漂浮物体的高度 15 function move(){ 16 if(xon){ 17 oLeft += 1; 18 }else{ 19 oLeft -= 1; 20 } 21 if(yon){ 22 oTop += 1; 23 }else{ 24 oTop -= 1; 25 } 26 $("#img1").css("left",oLeft); 27 $("#img1").css("top",oTop); 28 if(oLeft<=0){ 29 xon = true; 30 } 31 if(oLeft >= bodyW - imgW){ 32 xon = false; 33 } 34 if(oTop<=0){ 35 yon = true; 36 } 37 if(oTop >= bodyH - imgH){ 38 yon = false; 39 } 40 } 41 var timeMove = setInterval(move,time); //定时器 44 $("#img1").hover(function(){ 45 clearInterval(timeMove); 46 },function(){ 47 timeMove = setInterval(move,time); 50 }) 51 })
参考文章：https://blog.csdn.net/weixin_33981932/article/details/92602043
