你在这儿: 首页>严肃的

jQuery简单实现微博广场信息块缓慢下滑效果

来源:本站   时间: 2011-06-04   浏览次数:0

-需要:引入一个jquery的包-原理: 隐藏第一组标签(包含里面的内容),然后用slideDown效果渐渐下滑显示出来
 再把最后一组标签插入到.. jQuery简单实现微博广场信息块缓慢下滑效果
直接将以下代码保存为slideDown.html即可

____________________________________________________________________

 <!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="http://www.cozof.com/images/js/jquery.min.1.5.js"></script>
<script type="text/javascript">
/*
-需要:引入一个jquery的包
-原理:
 隐藏第一组<p></p>标签(包含里面的内容),然后用slideDown效果渐渐下滑显示出来
 再把最后一组<p></p>标签插入到最前面并隐藏,形成循环
-by锋迷全球
-时间:2011/06/04
*/
$(function()
{
var interval = 3000;
var slide    =  setInterval(slideIt,interval);

function slideIt()
{
             var obj = $('p','#container');//定义一个变量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淡出 

 
};


$('#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>



____________________________________________________________________

演示地址:点此打开

 

 

 本文链接:http://www.cozof.com/show/40.shtml   [复制] [收藏]
----------------------------------------------------------------------------------------------------------------------------
分享本文到:
更多
----------------------------------------------------------------------------------------------------------------------------
关键词:jQuery  下滑  特效  js  微博  
你可能还感兴趣的:

----------------------------------------------------------------------------------------------------------------------------
已有0位网友发表了看法
  • 用户名:
  • 内  容:
  • 验证码:
    点击换一张

最新

津巴布韦选丑大赛 众多男子角逐
哈尔滨佛学院正式成立了!
英国军情六处:007情商太低 现实
世界上10个最戒备森严的地方
丑是好的至少你知道大家是因为你
比尔·盖茨豪宅,参观1次3.5万美元
林肯的小趣事
替补登场9分钟5球创世界纪录——

推荐

能认出5字以上就是绝对是高手!
世界上最好的10支特种部队,GIS特
谷歌变身子公司,成立母公司Alphab
鲁迅其实还是一名资深设计师
美国在国际奥数比赛中“破天荒”
关于性吸引的5个真相
不会死的生物:美洲龙虾、刺果松、
五十大最佳发明之激光打蚊子

最热门

为什么百度腾讯阿里巴巴等要在开
检测JSON代码合法性,JSON格式化
如何取消驱动精灵开机启动
15款Android(安卓)下常用有趣有
求种子地址!
firefox(火狐)如何像ie一样显示j
你们这帮混蛋,鲁迅到底是谁,原名冰
法克.尤尔.马泽尔 百科恶搞

随机

无人驾驶汽车将首次横跨美国
不要让PHP成为穷酸美国人的表亲
jQuery简单实现微博广场信息块缓
鲁迅其实还是一名资深设计师
HTML5来袭,疯狂的有趣的HTML5 de
手把手教你服务器远程连接设置如
李小龙BruceLee好莱坞试镜珍贵真
在电影院看3D泰坦尼克,原本哭的希

最近浏览

   清除记录

联系

合  作: [email protected] [复制]
服  务: [email protected] [复制]
投  稿: [email protected] [复制]
不  解: [email protected] [复制]

cozof qr code
手机访问:www.cozof.com/wap/

这是什么