一个菜鸟的互联网技术分享博客
您的位置: 主页 > 页面悬浮窗上下左右移动
advertisement

页面悬浮窗上下左右移动

1、HTML部分:

  1. <div id="imgDiv" style="position:absolute;left:50px;top:60px;">  
  2.     <div>  
  3.   <a href="/edu_news/newsdetail/v/3395.html" target="_blank">  
  4.       <img src="/images/ext/2019in.jpg" />  
  5.   </a>  
  6.     </div>  
  7. </div>  

2、JS部分:

  1. <script>  
  2. var xin = true,  
  3. yin = true;  
  4. var step = 1;  
  5. var delay = 10;  
  6. var $obj;  
  7. $(function() {  
  8.     $obj = $("#imgDiv");  
  9.     var time = window.setInterval("move()", delay);  
  10.     $obj.mouseover(function() {  
  11.         clearInterval(time)  
  12.     });  
  13.     $obj.mouseout(function() {  
  14.         time = window.setInterval("move()", delay)  
  15.     });  
  16. });  
  17.   
  18. function move() {  
  19.     var left = $obj.offset().left;  
  20.     var top = $obj.offset().top;  
  21.     var L = T = 0//左边界和顶部边界  
  22.     var R = $(window).width() - $obj.width(); // 右边界  
  23.     var B = $(window).height() - $obj.height(); //下边界  
  24.     if (left < L) {  
  25.         xin = true// 水平向右移动  
  26.     }  
  27.     if (left > R) {  
  28.         xin = false;  
  29.     }  
  30.     if (top < T) {  
  31.         yin = true;  
  32.     }  
  33.     if (top > B) {  
  34.         yin = false;  
  35.     }  
  36.     left = left + step * (xin == true ? 1 : -1);  
  37.     top = top + step * (yin == true ? 1 : -1);  
  38.     // 给div 元素重新定位  
  39.     $obj.offset({  
  40.         top: top,  
  41.         left: left  
  42.     })  
  43. }  
  44. $(function() {  
  45.     $("#a").click(function() {  
  46.         var b = $("#a").parent();  
  47.         $(b).remove();  
  48.     })  
  49. })  
  50. $("#imgDiv").draggable();  
  51. </script>  

3、样式就一个相对定位,和上、左的相对位置

案例图如下:



zhangren.online
上一篇:jQuery数字字母组合验证码
下一篇:CSS3实现伪类hover离开时平滑过渡效果

您可能喜欢

​javaascript之数字倒计时

​javaascript之数字倒计时

​不常见css属性汇总

​不常见css属性汇总

​常用函数

​常用函数

回到顶部