JavaScript浮动广告

最新推荐文章于 2023-10-13 11:29:01 发布

村花的兄弟

最新推荐文章于 2023-10-13 11:29:01 发布

阅读量3.4k

点赞数 1

分类专栏： javascript 文章标签： javascript 图片

本文链接：https://blog.csdn.net/qq_33899928/article/details/78726388

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js的浮动广告代码，复制就能用
自己修改图片的地址

<html>
<head>
    <meta charset="utf-8">
    <title>图片浮动</title>
</head>
<body>
    <div id="img" style="position:absolute">
        <img src="图片的地址" border="0">
    </div>
    <script>
        //图片初始的位置
        var x = 50,y = 60
        //x轴的控制器
        var x_in = true
        //y轴的控制器
        var y_in = true
        //设置一个步长，值越大移动越快
        var step = 1
        //设置函数运行周期的时间
        var delay = 10
        var img = document.getElementById("img")

        //实现浮动的函数
        function float() {
            //左边头部设置为0
            var L = T = 0
            //移动层的右边界   页面可视层 - 元素的宽度
            var R = document.body.clientWidth - img.offsetWidth
            //移动层的下边界
            var B = document.body.clientHeight - img.offsetHeight
            //更新x的值
            img.style.left = x
            //更新y的值
            img.style.top = y
            //x为图片的x轴，如果x_in为true表示在视野内，图片向前移动，如果为false表示越界图片往回移动
            x = x + step*(x_in?1:-1)
            if (x < L) {
                x_in = true
                x = L
            }
            if (x > R){
                x_in = false
                x = R
            }
            y = y + step*(y_in?1:-1)
            if (y < T) { 
                y_in = true
                y = T
            }
            if (y > B) {
                y_in = false
                y = B
            }
        }
        //setInterval按周期运行函数(以毫秒记)
        var itl = setInterval("float()", delay)
        //鼠标移动事件，当鼠标移动到对象上时触发
        img.onmouseover = function(){
            //取消setInterval设置的值
            clearInterval(itl)
        }
        //鼠标移动事件，当鼠标移出对象时触发
        img.onmouseout = function(){
            itl = setInterval("float()", delay)
        }
    </script>
</body>
</html>