怎么制作網(wǎng)站飄動廣告（帶關(guān)閉功能）發(fā)布者：本站 時間：2020-05-12 15:05:19
下面就跟著學(xué)建站網(wǎng)來學(xué)習(xí)一下怎么制作網(wǎng)站上的飄動廣告吧。
方法/步驟
-
制作網(wǎng)站上的飄動廣告需要使用jquery，所以第一步要在自己網(wǎng)站上引入jquery；代碼放在</head>標簽上面；
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
-
第二步就是放上飄動廣告的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>
-
最后一步就是放上控制飄動廣告的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; } //根據(jù)有沒有超出范圍來確定廣告的移動方向 left += step * (xin == true ? 1 : -1); top += step * (yin == true ? 1 : -1); // 給div 元素重新定位 $obj.offset({ top: top, left: left }) } //關(guān)閉 $(function() { $("#a").click(function() { var b = $("#a").parent(); $(b).remove(); }) }) </script>
這樣就可以制作網(wǎng)站上的飄動廣告了。下面是網(wǎng)站飄動廣告的全部代碼合集：
<!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; 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; } //根據(jù)有沒有超出范圍來確定廣告的移動方向 left += step * (xin == true ? 1 : -1); top += step * (yin == true ? 1 : -1); // 給div 元素重新定位 $obj.offset({ top: top, left: left }) } //關(guān)閉 $(function() { $("#a").click(function() { var b = $("#a").parent(); $(b).remove(); }) }) </script> </body> </html>
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗，優(yōu)秀的技術(shù)和設(shè)計水平，更放心
3. 全程省心服務(wù)，不必擔(dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時聯(lián)系電話：021-58370032