经典的js物理弹性漂浮图片广告代码

比较经典通用的Js物理弹性漂浮广告代码,漂浮速度适中、大小适中,是最经典最标准的漂浮广告代码了,推荐给大家使用。不过漂浮广告在一个页面上最好不要放太多,否则很影响网站浏览体验,得不偿失。  

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>经典的js物理弹性漂浮图片广告代码丨kiddy</title>
    </head>
    <body>
    <DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
    visibility: visible;"><a href="http://www.langqiaohome.com/" target="_blank"><img src="http://www.langqiaohome.com/uploads/allimg/150402/1-150402152444U1.jpg" width="250" height="60" border="0"></a></DIV>
    <div align="center">
    <p>
    <SCRIPT>
    var xPos = 300;
    var yPos = 200;
    var step = 1;
    var delay = 30;
    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.body.clientWidth;
    height = document.body.clientHeight;
    Hoffset = img1.offsetHeight;
    Woffset = img1.offsetWidth;
    img1.style.left = xPos + document.body.scrollLeft;
    img1.style.top = yPos + document.body.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>
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>js物理弹性漂浮广告</p>
    <p></p>
    <p>&nbsp;</p>
    </div>
    </body>
    </html>

    

 

posted @ 2015-06-26 11:03  滇时尚  阅读(838)  评论(0编辑  收藏  举报