薛定谔的祖父的博客

学习Java过程中的笔记

JavaScript浮动广告

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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33899928/article/details/78726388
文章标签: javascript 图片
个人分类: javascript
上一篇JAVA设计模式:模板设计模式
想对作者说点什么? 我来说一句

浮动广告javascript

2010年04月08日 158KB 下载

javascript浮动广告

2013年07月11日 1KB 下载

没有更多推荐了,返回首页

关闭
关闭