Js浮動廣告效果實現

時間 2019-12-01

原文原文鏈接

第一種漂浮廣告不符合W3C
JavaScript漂浮廣告代碼，很不錯，代碼精簡，不過一次只有漂一個，複製就能用了。但願站長朋友喜歡。javascript

 
<html> 
<head> 
<title>漂浮廣告</title> 
<body> 
<div id="codefans_net" style="position:absolute"> 
<!--連接地址--><a href="#" target="_blank"> 
<!--圖片地址--><img src="/images/logo.gif" border="0"> 
</a> 
</div> 
<script> 
var x = 50,y = 60 
var xin = true, yin = true 
var step = 1 
var delay = 10 
var obj=document.getElementById("codefans_net") 
function float() { 
var L=T=0 
var R= document.body.clientWidth-obj.offsetWidth 
var B = document.body.clientHeight-obj.offsetHeight 
obj.style.left = x + document.body.scrollLeft 
obj.style.top = y + document.body.scrollTop 
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("float()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("float()", delay)} 
</script> 
</body> 
</html>

View Code

第二種漂浮廣告不符合標準
Js漂浮廣告代碼，比較經典的浮動廣告，到現還很實用，若是你是一位站長的話，這種代碼是必備的，但願對你有用處。 css

 1  
 2 <html> 
 3 <head> 
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 5 <title>漂浮廣告</title> 
 6 </head> 
 7 <body> 
 8 <DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px; 
 9 visibility: visible;"><a href="http://sc.jb51.net" target="_blank"><img src="/images/logo.gif" width="80" height="80" border="0"></a></DIV> 
10 <SCRIPT> 
11 var xPos = 300; 
12 var yPos = 200; 
13 var step = 1; 
14 var delay = 30; 
15 var height = 0; 
16 var Hoffset = 0; 
17 var Woffset = 0; 
18 var yon = 0; 
19 var xon = 0; 
20 var pause = true; 
21 var interval; 
22 img1.style.top = yPos; 
23 function changePos() 
24 { 
25 width = document.body.clientWidth; 
26 height = document.body.clientHeight; 
27 Hoffset = img1.offsetHeight; 
28 Woffset = img1.offsetWidth; 
29 img1.style.left = xPos + document.body.scrollLeft; 
30 img1.style.top = yPos + document.body.scrollTop; 
31 if (yon) 
32 {yPos = yPos + step;} 
33 else 
34 {yPos = yPos - step;} 
35 if (yPos < 0) 
36 {yon = 1;yPos = 0;} 
37 if (yPos >= (height - Hoffset)) 
38 {yon = 0;yPos = (height - Hoffset);} 
39 if (xon) 
40 {xPos = xPos + step;} 
41 else 
42 {xPos = xPos - step;} 
43 if (xPos < 0) 
44 {xon = 1;xPos = 0;} 
45 if (xPos >= (width - Woffset)) 
46 {xon = 0;xPos = (width - Woffset); } 
47 } 
48 
49 function start() 
50 { 
51 img1.visibility = "visible"; 
52 interval = setInterval('changePos()', delay); 
53 } 
54 function pause_resume() 
55 { 
56 if(pause) 
57 { 
58 clearInterval(interval); 
59 pause = false;} 
60 else 
61 { 
62 interval = setInterval('changePos()',delay); 
63 pause = true; 
64 } 
65 } 
66 start(); 
67 </SCRIPT> 
68 </body> 
69 </html>

第三種符合W3C的漂浮廣告代碼 html

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>符合W3C的漂浮廣告代碼-腳本之家</title> 
</head> 
<body> 
<script> 
document.write ("<DIV id=img1 style='Z-INDEX: 100; LEFT: 2px; WIDTH: 252px; POSITION: absolute; TOP: 43px; HEIGHT: 172px; ") 
document.write (" visibility: visible;'> ") 
document.write (" <a href='http://s.jb51.net' target='_blank'> ") 
document.write (" <img src='/upload/201204/20120411210123566.gif'style=border:none;/> ") 
document.write (" </a></DIV> ") 
var xPos = 300; 
var yPos = 200; 
var step = 1; 
var delay = 8; 
var height = 0; 
var Hoffset = 0; 
var Woffset = 0; 
var yon = 0; 
var xon = 0; 
var pause = true; 
var interval; 
img1.style.top = yPos; 
function changePos() 
{ 
width = document.documentElement.clientWidth; 
height = document.documentElement.clientHeight; 
Hoffset = img1.offsetHeight; 
Woffset = img1.offsetWidth; 
img1.style.left = xPos + document.documentElement.scrollLeft; 
img1.style.top = yPos + document.documentElement.scrollTop; 
if (yon) 
{yPos = yPos + step;} 
else 
{yPos = yPos - step;} 
if (yPos < 0) 
{yon = 1;yPos = 0;} 
if (yPos >= (height - Hoffset)) 
{yon = 0;yPos = (height - Hoffset);} 
if (xon) 
{xPos = xPos + step;} 
else 
{xPos = xPos - step;} 
if (xPos < 0) 
{xon = 1;xPos = 0;} 
if (xPos >= (width - Woffset)) 
{xon = 0;xPos = (width - Woffset); } 
} 
function start() 
{ 
img1.visibility = "visible"; 
interval = setInterval('changePos()', delay); 
} 
function pause_resume() 
{ 
if(pause) 
{ 
clearInterval(interval); 
pause = false;} 
else 
{ 
interval = setInterval('changePos()',delay); 
pause = true; 
} 
} 
start(); 
</script> 
</body> 
</html>

View Code

第四種經常使用網頁漂浮廣告代碼java

<body bgcolor="#F7F7F7">
<!--圖片漂浮廣告代碼開始-->
<div id="www_qpsh_com" style="position:absolute">
<!--連接地址--><a href="http://www.dabaoku.com" _fcksavedurl="/" target="_blank">
<!--圖片地址--><img src="http://www.dabaoku.com/images/logo.gif" _fcksavedurl="http://www.dabaoku.com/images/logo.gif" border="0">
</a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("www_qpsh_com")
function floatwww_qpsh_com() {
var L=T=0
//by www.qpsh.com
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatwww_qpsh_com()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatwww_qpsh_com()", delay)}
</script>
<!--圖片漂浮廣告代碼結束-->
</body>

View Code

第五種親自實踐過，能夠實現從左上角自動移動到右下角jquery

說明：jquery在1.9開始不支持.live()方法的寫法而改用.on()，見http://jquery.com/upgrade-guide/1.9/#live-removed.該插件中關閉圖片連接使用了.live().請根據本身狀況自行修改.　　　　　　　　　　　　　　　　　　　　　　　　　　　　web

(function ($) {
    $.fn.floatAd = function (options) {
        var defaults = {
            imgSrc: "/web/Images/logo.gif", //漂浮圖片路徑
            url: "http://www.baidu.com", //圖片點擊跳轉頁
            openStyle: 1, //跳轉頁打開方式 1爲新頁面打開  0爲當前頁打開
            speed: 10 //漂浮速度 單位毫秒
        };
        var options = $.extend(defaults, options);
        var _target = options.openStyle == 1 ? "target='_blank'" : '';
        var html = "<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>";
        html += "  <a href='" + options.url + "' " + _target + "><img src='" + options.imgSrc + "' border='0' class='float_ad_img'/></a> <a href='javascript:;' id='close_float_ad' style=''>x</a>";
        html += "</div>";

        $('body').append(html);

        function init() {
            var x = 0, y = 0
            var xin = true, yin = true
            var step = 1
            var delay = 10
            var obj = $("#float_ad")
            obj.find('img.float_ad_img').load(function () {
                var float = function () {
                    var L = T = 0;
                    var OW = obj.width(); //當前廣告的寬
                    var OH = obj.height(); //高
                    var DW = $(document).width(); //瀏覽器窗口的寬
                    var DH = $(document).height();

                    x = x + step * (xin ? 1 : -1);
                    if (x < L) {
                        xin = true; x = L
                    }
                    if (x > DW - OW - 1) {//-1爲了ie
                        xin = false; x = DW - OW - 1
                    }

                    y = y + step * (yin ? 1 : -1);
                    if (y > DH - OH - 1) {

                        yin = false; y = DH - OH - 1;
                    }
                    if (y < T) {
                        yin = true; y = T
                    }

                    var left = x;
                    var top = y;

                    obj.css({ 'top': top, 'left': left });
                }
                var itl = setInterval(float, options.speed);
                $('#float_ad').mouseover(function () { clearInterval(itl) });
                $('#float_ad').mouseout(function () { itl = setInterval(float, options.speed) })
            });
            // 點擊關閉
            $('#close_float_ad').live('click', function () {
                $('#float_ad').hide();
            });
        }

        init();

    }; //floatAd

})(jQuery);

插件源碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/jscript" src="JS/FloatAdd.js"></script>    
<script type="text/javascript">
        $(function () {
            //調用漂浮插件
            $("body").floatAd({
                imgSrc: "/web/Images/logo.gif",
                url: 'http://www.baidu.com'
            });
        })
        </script>

調用方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。