页面图片随机浮动效果

最新推荐文章于 2024-07-31 16:33:32 发布

luanxiyuan

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量453

点赞数

分类专栏：经(cǎi)验(kēng)总结文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/luanxiyuan/article/details/84298659

版权

经(cǎi)验(kēng)总结专栏收录该内容

251 篇文章 3 订阅

订阅专栏

话不多说，直接上代码，一看即懂：

<html>
<head>
</head>
<body>
<div id="img" style="position: absolute;">
    <a href="http://www.baidu.com"><img src="baidu.gif" border="0">
    </a>
</div>
<SCRIPT LANGUAGE="JavaScript">
    var xPos = 20;
    var yPos = document.body.clientHeight;
    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;
    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 show() {
        img.visibility = "visible";
        interval = setInterval('changePos()', delay);
    }

    show();
</script>
</body>
</html>

luanxiyuan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面图片随机浮动效果

话不多说，直接上代码，一看即懂：<html><head></head><body><div id="img" style="position: absolute;"> <a href="http://www.baidu.com"><img src="baidu.gif" border="0">...
复制链接

扫一扫

专栏目录