网页漂浮广告JS特效源码分享


先来看一下效果:

网页漂浮广告JS特效源码分享

Html页面代码

<div id="img1" style="z-index: 100; left: 2px; width: 59px; position: absolute; top: 43px;
        height: 61px; visibility: visible;">
        <a href="http://www.muzhuangnet.com/" target="_blank">
            <img src="图片地址" width="180" height="88" border="0"></a>
    </div>
    <script src="js.js"></script>

js代码:

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();

这样就可以实现网页漂浮广告了,试试吧~

相关阅读 >>

html实现自动清理js、css文件的缓存

js遍历对象有几种方法

js数组如何删除指定元素

简单实用的进度条加载组件loader.js

js实现双色球效果

js filter是什么意思

浅谈js函数及闭包

js如何实现简易倒计时效果

分享5种js字符串转数字的方法

如何利用js实现音乐导航效果

更多相关阅读请进入《网页漂浮广告》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...