怎么制作网站飘动广告（带关闭功能）

我们在做门户网站或者医院网站时，往往需要制作飘动广告，将网站的信息显示在飘动广告上面。效果如下图：

方法/步骤

1. 制作网站上的飘动广告需要使用jquery，所以第一步要在自己网站上引入jquery；代码放在</head>标签上面；
   <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
2. 第二步就是放上飘动广告的HTML代码，这个代码可以放在</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>
3. 最后一步就是放上控制飘动广告的JS代码了。也可以放在</body>标签上面；
   <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;
   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
   })
   }
   //关闭
   $(function() {
   $(“#a”).click(function() {
   var b = $(“#a”).parent();
   $(b).remove();
   })
   })
   </script>

这样就可以制作网站上的飘动广告了。下面是网站飘动广告的全部代码合集：