jquery简单实现微博广场下滑效果
<!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 type="text/javascript" src="js/jquery-1.4.3.min.js"></script><script type="text/javascript">/*-需要：引入一个jquery的包-原理：隐藏第一组<p></p>标签（包含里面的内容），然后用slideDown效果渐渐下滑显示出来再把最后一组<p></p>标签插入到最前面并隐藏，形成循环*/$(function(){var interval = 3000;var slide = setInterval(slideIt,interval);$("#container").mouseover(function(){clearInterval(slide);//当鼠标移上去的时候停止下滑}).mouseout(function(){slide = setInterval(slideIt,interval);//当鼠标移开的时候继续下滑});//slideIt();});function slideIt(){var obj = $("#container p");//定义一个变量obj，把id为container里的所有<p></p>标签赋给它/*版本1obj.first().slideDown(5000);//让id为container里的第一个div以5000毫秒(5秒)的速度下滑（这个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淡出};</script></head><body><div id="container"><p>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>
页:
[1]