浏览 5040 次
|
锁定老帖子 主题：jquery简单实现微博广场下滑效果
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-01-10
引用 <!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>标签赋给它 /*版本1 obj.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> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2012-01-12
请先上图！不然吸引不了人
|
| 返回顶楼 | |
|
发表时间：2012-01-12
上图
|
| 返回顶楼 | |
|
发表时间：2012-01-14
还得做个小测试，我就mark
|
| 返回顶楼 | |
