- 论坛徽章:
- 0
|
|
jquery简单实现微博广场下滑效果
Html代码- 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 2.<html xmlns="http://www.w3.org/1999/xhtml">
- 3. <head>
- 4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- 5. <title>jQuery下滑效果</title>
- 6. <style type="text/css">
- 7./*css也是重要的*/
- 8.#container {
- 9. height: 540px;
- 10. width: 358px;
- 11. overflow: hidden;
- 12.}
- 13.
- 14./*外面容器高度为400px，超过时不显示*/
- 15.#container p {
- 16. border: 1px dotted #333366;
- 17. padding: 10px;
- 18. margin-bottom: 10px;
- 19. width: 335px;
- 20. height: 70px;
- 21.}
- 22.</style>
- 23. <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
- 24. <script type="text/javascript">
- 25. /*-需要：引入一个jquery的包-原理：隐藏第一组<p></p>标签（包含里面的内容），然后用slideDown效果渐渐下滑显示出来再把最后一组<p></p>标签插入到最前面并隐藏，形成循环*/
- 26. $(function(){
- 27. var interval = 3000;
- 28. var slide = setInterval(slideIt,interval);
- 29. $("#container").mouseover(function(){
- 30. clearInterval(slide);//当鼠标移上去的时候停止下滑
- 31. }).mouseout(function(){
- 32. slide = setInterval(slideIt,interval);//当鼠标移开的时候继续下滑
- 33. });
- 34. //slideIt();
- 35. });
- 36.
- 37.
- 38. function slideIt(){
- 39. var obj = $("#container p");//定义一个变量obj，把id为container里的所有<p></p>标签赋给它
- 40.
- 41. /*版本1
- 42.
- 43. obj.first().slideDown(5000);//让id为container里的第一个div以5000毫秒(5秒)的速度下滑（这个p默认是隐藏的
- 44.
- 45. obj.last().insertBefore(obj.first()).hide();//把id为container里的最后一组<p></p>标签插到最前面（这样容器里的<p></p>标签就可以循环起来）并隐藏
- 46.
- 47. */
- 48.
- 49. /*版本2*/
- 50.
- 51. obj.last().hide().prev().hide();//倒数2个隐藏
- 52.
- 53. obj.last().insertBefore(obj.first()).fadeIn(1000);//把id为container里的最后一组<p></p>标签插到最前面（这样容器里的<p></p>标签就可以循环起来）并以1秒速度淡出
- 54.
- 55. obj.eq(0).hide().slideDown(300);//第1个p淡出
- 56.
- 57. obj.eq(4).fadeOut(500);//第5个p淡出
- 58.
- 59. };
- 60.
- 61.</script>
- 62. </head>
- 63. <body>
- 64. <div id="container">
- 65. <p>some msg here 1...</p>
- 66. <p>some msg here 2...</p>
- 67. <p>some msg here 3...</p>
- 68. <p>some msg here 4 ...</p>
- 69. <p>some msg here 5 ...</p>
- 70. <p>some msg here 6 ...</p>
- 71. <p>some msg here 7 ...</p>
- 72. </div>
- 73. <!--结束-->
- 74. </body>
- 75.</html>
|
|
免费注册
发表于 2012-01-10 15:34
