JavaScript浮动广告

原创 2017年12月05日 23:56:27

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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

html+javascript实现广告窗自由浮动

首先介绍一种设置div初始位置的定位方法: .html代码如下: 层的移动 #ad{width:120px;height:120px;background:url(images/def...
  • yayun0516
  • yayun0516
  • 2014年11月27日 14:44
  • 3882

基于JQuery网页漂浮广告窗口Js详解

网页类似广告漂浮窗口的制作思路以及详细代码
  • u011427035
  • u011427035
  • 2016年04月06日 09:38
  • 6421

JS上下自动漂浮广告,可关闭

一不懂开发的朋友,需要一个左右浮动显示的广告,网上找了一个,放在这里,希望对大家有用。 很简单,只是想能给大家节省一部分时间     // 这是关闭飘浮广告的宽度,请根据你的广...
  • airingyuan
  • airingyuan
  • 2014年12月08日 21:56
  • 3488

JavaScript - 浮动广告窗口实例

浮动广告窗口 浮动广
  • wangzi11322
  • wangzi11322
  • 2015年04月26日 08:27
  • 1622

JavaScript对联式浮动广告

摘自:http://www.111cn.net/js_a/73/3504e367c04f83f9626cf9811a52c33b.htm var delta = 0.8; var col...
  • wbloveilove
  • wbloveilove
  • 2013年05月22日 21:11
  • 481

JavaScript-浮动广告-兼容

var hbcms_img_src = 'http://img.baidu.com/img/logo-zhidao.gif';// 图片地址 var hbcms_img_url = 'http://i...
  • yuyang2013
  • yuyang2013
  • 2013年03月13日 14:53
  • 357

浮动广告javascript

  • 2010年04月08日 02:52
  • 158KB
  • 下载

javascript 浮动广告类

  • 2007年07月05日 13:17
  • 4KB
  • 下载

javascript两种浮动广告

  • 2008年10月17日 11:26
  • 11KB
  • 下载

javascript浮动广告

  • 2013年07月11日 23:13
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript浮动广告
举报原因:
原因补充:

(最多只允许输入30个字)