JS控制浮动代码



$(window).scroll(function() {
            if ($(this).scrollTop() >=395) {
                $("div.list_con_left").css("position","fixed");
				$("div.list_con_left").css("top","0px");
            }else{
                $("div.list_con_left").css("position","absolute");
				$("div.list_con_left").css("top","402px");
           }
        });


事先引入Jquery库文件。

再判断浏览器往下滚动多少,改变DIV属性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要一个 HTML 页面,用来放置广告素材和 JavaScript 代码。下面是一个简单的 HTML 页面示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动广告</title> <style> #ad { position: absolute; top: 100px; left: -200px; width: 200px; height: 200px; background-color: yellow; border: 1px solid black; transition: left 0.5s ease; } </style> </head> <body> <div id="ad"></div> <script src="ad.js"></script> </body> </html> ``` 注意到,我们在 head 中添加了一个样式,设置了广告的初始位置在页面左侧,并且添加了一个过渡动画效果。 接下来,我们编写 JavaScript 代码代码中我们定义了一个函数 `moveAd()` 用来控制广告的位置。具体实现如下: ```javascript var ad = document.getElementById('ad'); var x = -200; var y = 100; var direction = 1; function moveAd() { if (x >= window.innerWidth - 200) { direction = -1; } else if (x <= -200) { direction = 1; } x += direction * 5; ad.style.left = x + 'px'; ad.style.top = y + 'px'; } setInterval(moveAd, 50); ``` 代码中,我们首先获取了广告元素的 DOM 对象,并定义了初始位置和方向。然后定义了函数 `moveAd()`,每 50 毫秒执行一次。在函数中,我们通过判断广告是否到达页面边缘,来控制广告的移动方向和位置。最后,我们通过修改广告元素的样式,来实现广告的移动。 最后,我们将 JavaScript 代码保存在 `ad.js` 文件中,并将其引入到 HTML 页面中。这样,我们就完成了浮动广告的制作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值