js 漂浮广告

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery漂浮广告代码</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="imgDiv" style="position:absolute;left:50px;top:60px;">
    <div id="a" style="width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div>
    <!-- <img src="01.jpg" border="0" /> -->
    <div style="width:180px;height:180px;background:red;"></div>
</div>

<script>
var xin = true,
    yin = true;
var step = 1;
var delay = 10;
var $obj;
$(function() {
    $obj = $("#imgDiv");
    var time = window.setInterval("move()", delay);
    $obj.mouseover(function() {
        clearInterval(time)
    });
    $obj.mouseout(function() {
        time = window.setInterval("move()", delay)
    });
});

function move() {
    var left = $obj.offset().left;
    console.log(left)
    var top = $obj.offset().top;
    var L = T = 0; //左边界和顶部边界
    var R = $(window).width() - $obj.width(); // 右边界
    var B = $(window).height() - $obj.height(); //下边界

    //难点:怎样判断广告的4个边框有没有超出可视化范围!
    if (left < L) {
        xin = true; // 水平向右移动
    }
    if (left > R) {
        xin = false;
    }
    if (top < T) {
        yin = true;
    }
    if (top > B) {
        yin = false;
    }
    //根据有没有超出范围来确定广告的移动方向
    left += step * (xin == true ? 1 : -1);
    top  += step * (yin == true ? 1 : -1);
    // 给div 元素重新定位
    $obj.offset({
        top: top,
        left: left
    })
}

</script>

</body>
</html>

 
  <! 
  doctype 
  html 
  > 
 
 
  < 
  html 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset 
  = 
  "utf-8" 
  > 
 
 
  < 
  title 
  >jquery漂浮广告代码</ 
  title 
  > 
 
 
  < 
  script 
  src 
  = 
  "http://libs.baidu.com/jquery/1.9.1/jquery.min.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  style 
  > 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  id 
  = 
  "imgDiv" 
  style 
  = 
  " 
  position:absolute;left:50px;top:60px;" 
  > 
 
 
   < 
  div 
  id 
  = 
  "a" 
  style 
  = 
  " 
  width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;" 
  >×</ 
  div 
  > 
 
 
  <!-- <img src="01.jpg" border="0" /> --> 
 
 
   < 
  div 
  style 
  = 
  " 
  width:180px;height:180px;background:red;" 
  ></ 
  div 
  > 
 
 
  </ 
  div 
  > 
 

 
  < 
  script 
  > 
 
 
  var 
   xin  
  = 
  true 
  , 
 
 
   yin  
  = 
  true 
  ; 
 
 
  var 
   step  
  = 
  1 
  ; 
 
 
  var 
   delay  
  = 
  10 
  ; 
 
 
  var 
   $obj; 
 
 
  $ 
  ( 
  function 
  () { 
 
 
   $obj  
  = 
  $ 
  ( 
  "#imgDiv" 
  ); 
 
 
  var 
   time  
  = 
  window 
  . 
  setInterval 
  ( 
  "move()" 
  , delay); 
 
 
  $obj 
  . 
  mouseover 
  ( 
  function 
  () { 
 
 
  clearInterval 
  (time) 
 
 
   }); 
 
 
  $obj 
  . 
  mouseout 
  ( 
  function 
  () { 
 
 
   time  
  = 
  window 
  . 
  setInterval 
  ( 
  "move()" 
  , delay) 
 
 
   }); 
 
 
  }); 
 

 
  function 
  move 
  () { 
 
 
  var 
   left  
  = 
  $obj 
  . 
  offset 
  (). 
  left 
  ; 
 
 
  console 
  . 
  log 
  (left) 
 
 
  var 
   top  
  = 
  $obj 
  . 
  offset 
  (). 
  top 
  ; 
 
 
  var 
  L 
  = 
  T 
  = 
  0 
  ;  
  //左边界和顶部边界 
 
 
  var 
  R 
  = 
  $ 
  ( 
  window 
  ). 
  width 
  ()  
  - 
  $obj 
  . 
  width 
  ();  
  // 右边界 
 
 
  var 
  B 
  = 
  $ 
  ( 
  window 
  ). 
  height 
  ()  
  - 
  $obj 
  . 
  height 
  ();  
  //下边界 
 

 
  //难点:怎样判断广告的4个边框有没有超出可视化范围! 
 
 
  if 
   (left  
  < 
  L 
  ) { 
 
 
   xin  
  = 
  true 
  ;  
  // 水平向右移动 
 
 
   } 
 
 
  if 
   (left  
  > 
  R 
  ) { 
 
 
   xin  
  = 
  false 
  ; 
 
 
   } 
 
 
  if 
   (top  
  < 
  T 
  ) { 
 
 
   yin  
  = 
  true 
  ; 
 
 
   } 
 
 
  if 
   (top  
  > 
  B 
  ) { 
 
 
   yin  
  = 
  false 
  ; 
 
 
   } 
 
 
  //根据有没有超出范围来确定广告的移动方向 
 
 
   left  
  += 
   step  
  * 
   (xin  
  == 
  true 
  ? 
  1 
  : 
  - 
  1 
  ); 
 
 
   top  
  += 
   step  
  * 
   (yin  
  == 
  true 
  ? 
  1 
  : 
  - 
  1 
  ); 
 
 
  // 给div 元素重新定位 
 
 
  $obj 
  . 
  offset 
  ({ 
 
 
   top 
  : 
   top, 
 
 
   left 
  : 
   left 
 
 
   }) 
 
 
  } 
 

 
  < 
  / 
  script 
  > 
 

 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 

猜你喜欢