Jquery实现广告滚动

最新推荐文章于 2022-05-04 00:00:00 发布

一缕阳光直射你的心扉

最新推荐文章于 2022-05-04 00:00:00 发布

阅读量3k

点赞数 1

分类专栏： Jquery 文章标签： js广告 jquery 广告滚动

本文链接：https://blog.csdn.net/u013410747/article/details/50200463

版权

Jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

当页面的滚动条上下移动时，飘浮广告随着滚动条的滚动而上移或者下移，要明白两点，第一：放广告的层最好采用绝对定位，它的位置应该随着滚动条的改变而上下移动，滚动条的滚动促发的是onscroll事件，广告条所在的层的top值就是滚动条的高度，具体代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript"  src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
           $(window).scroll(function(){  
             var vtop=$(document).scrollTop();
             var vv=eval_r(vtop+200)+"px";
             $("#tv").css('left',$(document.body).width()+"px")
             $("#tv").css('top',vv);
             //$("#tv").animate({top:});
 })； 
        }
)
</script>
</head>
<body>
 <form method="post" action=""> 
 <div id="tv" style="position:absolute;top:60px;">我爱中国</div>  
<div  id="nn">
  <button class="int">sdfdsfds</button> <label for="username">用户名:</label> <input type="text" id="username" class="required"/>  
   sdsdfsdsdfsdfsdfdsf
</div>
<div></div>
</form>
</body>
</html>

$(window).height();获取浏览器显示区域的高度；

$(window).width();获取浏览器显示区域的宽度；

$(document.body).height();获取页面文档的高度；

$(document.body).width();获取页面文档的宽度；

$(document).scrollTop();获取滚动条到顶部的高度；

$(document).scrollLeft();获取滚动条到左边的宽度；

一缕阳光直射你的心扉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery实现广告滚动

当页面的滚动条上下移动时，飘浮广告随着滚动条的滚动而上移或者下移，要明白两点，第一：放广告的层最好采用绝对定位，它的位置应该随着滚动条的改变而上下移动，滚动条的滚动促发的是onscroll事件，广告条所在的层的top值就是滚动条的高度，具体代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=GB
复制链接

扫一扫