本文主要是介绍Jquery实现广告滚动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
当页面的滚动条上下移动时,飘浮广告随着滚动条的滚动而上移或者下移,要明白两点,第一:放广告的层最好采用绝对定位,它的位置应该随着滚动条的改变而上下移动,滚动条的滚动促发的是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();获取滚动条到左边的宽度;
这篇关于Jquery实现广告滚动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!