jquery 下滚效果

最新推荐文章于 2025-08-07 22:25:00 发布

原创最新推荐文章于 2025-08-07 22:25:00 发布 · 628 阅读

CC 4.0 BY-SA版权

文章标签：

#jquery #function #xhtml #border #html #css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery下滑效果</title>
<style type="text/css">
/*
css也是重要的
*/
#container{height:540px;width:358px;overflow:hidden;}/*外面容器高度为400px，超过时不显示*/
#container p{border:1px dotted #333366;padding:10px;margin-bottom:10px;width:335px;height:70px;}
</style>
 <script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
/*
-需要：引入一个jquery的包
-原理：
 隐藏第一组<p></p>标签（包含里面的内容），然后用slideDown效果渐渐下滑显示出来
 再把最后一组<p></p>标签插入到最前面并隐藏，形成循环
-by锋迷全球
-时间：2011/06/04
*/
$(function()
{
	var interval = 5000;
	var slide    =  setInterval(slideIt,interval);

	function slideIt()
	{
		var obj = $('p','#container');//定义一个变量obj，把id为container里的所有<p></p>标签赋给它
		/*版本1
		obj.first().slideDown('3000');//让id为container里的第一个div以3000毫秒(3秒)的速度下滑（这个p默认是隐藏的
		obj.last().insertBefore(obj.first()).hide();//把id为container里的最后一组<p></p>标签插到最前面（这样容器里的<p></p>标签就可以循环起来）并隐藏
		*/

		/*版本2*/
		obj.last().hide().prev().hide();//倒数2个隐藏
		obj.last().insertBefore(obj.first()).fadeIn(1000);//把id为container里的最后一组<p></p>标签插到最前面（这样容器里的<p></p>标签就可以循环起来）并以1秒速度淡出
		obj.eq(0).hide().slideDown(300);//第1个p淡出
		obj.eq(4).fadeOut(500);//第5个p淡出	
	};
	
	$('#container').mouseover(function()
	{
		clearInterval(slide);//当鼠标移上去的时候停止下滑
	}).mouseout(function()
	{
		slide = setInterval(slideIt,interval);//当鼠标移开的时候继续下滑
	});
	
	slideIt();
});
</script>
</head>
<body>
<div id="container">
<p style="display:none">some msg here 1...</p>
<p>some msg here 2...</p>
<p>some msg here 3...</p>
<p>some msg here 4 ...</p>
<p>some msg here 5 ...</p>
<p>some msg here 6 ...</p>
<p>some msg here 7 ...</p>
</div>


<!--结束-->

</body>
</html>