• Js浮动广告效果实现


    第一种 漂浮广告 不符合W3C
    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漂浮广告代码,比较经典的浮动广告,到现还很实用,如果你是一位站长的话,这种代码是必备的,希望对你有用处。 

     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的漂浮广告代码 

     
    <!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

     第四种 常用网页漂浮广告代码

    <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在1.9开始不支持.live()方法的写法而改用.on(),见http://jquery.com/upgrade-guide/1.9/#live-removed.该插件中关闭图片链接使用了.live().请根据自己情况自行修改.                            

    (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>
    调用方法
  • 相关阅读:
    错删表空间的恢复步骤
    如何使用PL/SQL进行远程数据库连接
    Oracle基础笔记
    PL/SQL如何导入dmp文件
    oracle表的基本操作
    sql里面的分页
    truncate table语句和delete table语句的区别
    c++ 时间类型详解 time_t[转]
    C++ 容器:顺序性容器、关联式容器和容器适配器
    XCode 快捷键
  • 原文地址:https://www.cnblogs.com/694579350liuq/p/7721896.html
Copyright © 2020-2023  润新知