漂浮广告的js代码 js图片漂浮特效

发布时间:2020-12-12编辑:脚本学堂
本文介绍了js漂浮广告代码的一个例子,图片飘动特效,兼容性和操作舒适度都不错的网页广告代码,专用于飘浮广告,鼠标放上后图片悬停,移开后继续飘动。

例子,js漂浮广告的代码
 

复制代码 代码示例:
<html>
<head>
<title>漂浮广告代码_www.jb200.com</title>
</head>
<body>
<div id="img" style="position:absolute;z-index=99;">
<a href="/"><img src="/jscss/demoimg/logo_demo1.gif" border="0"  alt='img'></a>
</div>
<script language="javascript">
    <!-- begin
    var xpos = document.body.clientwidth-20;
    var ypos = document.body.clientheight/2;
    var step = 1;
    var delay = 5;
    var height = 0;
    var hoffset = 0;
    var woffset = 0;
    var yon = 0;
    var xon = 0;
    var pause = true;
    var interval;
    img.style.top = ypos;
    function changepos() {
        width = document.body.clientwidth;
        height = document.body.clientheight;
        hoffset = img.offsetheight;
        woffset = img.offsetwidth;
        img.style.left = xpos + document.body.scrollleft;
        img.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() {
        img.visibility = "visible";
        interval = setinterval('changepos()', delay);
    }
    start();
    img.onmouseover = function() {
        clearinterval(interval);
        interval = null;
    }
    img.onmouseout = function() {
        interval = setinterval('changepos()', delay);
    }
    //  end -->
</script>
</body>
</html>