您的位置：前端开发>jquery>jQuery仿新浪微博和腾讯微博首页动态向下滚动效果

jQuery仿新浪微博和腾讯微博首页动态向下滚动效果

作者：前端开发 发布：2012-01-17 分类：jquery 阅读：3,298次

直接贴上代码啦

<!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=utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<title>jQuery仿新浪微博和腾讯微博首页动态向下滚动效果</title>
<style type=”text/css”>
*{ margin:0; padding:0;}
body {font-size:12px;}
ul,ol,li {list-style:none;}

.dongtai {background:#f6f6f6; width:700px;border:1px solid #e2e2e2; height:130px; overflow:hidden;}
.dongtai .tit {   border-bottom:1px solid #ddd;text-indent:20px;background:#c3c3b3;height:40px; line-height:40px;color:#b5c;}
ul {display:block;   padding:10px 10px 0; overflow:hidden; position:relative; top:10px; height:125px;}
ul li {display:block; height:50px; border-bottom:1px dashed #808080; background:#f6f6f6 left top no-repeat; padding-top:3px; margin-bottom:10px; *margin-bottom:5px;}

</style>
<script type=”text/javascript” src=’jquery.js’></script>
<script type=”text/javascript”>
var arr = new Array();
arr[‘0’] = ‘【1】：前端开发-武方博’;
arr[‘1’] = ‘【2】jQuery仿新浪微博和腾讯微博首页动态向下滚动效果’;
arr[‘2’] = ‘【3】：jquery微博向下滚动’;
arr[‘3’] = ‘【4】：仿新浪微博和腾讯微博首页动态向下滚动效果’;
arr[‘4’] = ‘【5】：仿新浪微博和腾讯微博首页动态向下滚动效果’;
arr[‘5’] = ‘【6】：仿新浪微博和腾讯微博首页动态向下滚动效果’;

var qu = arr.length-2;

window.onload = function(){
put();
}

function put(){
var str = ” ;
for(var i=qu;i<arr.length;i++){
str += ‘<li>’+arr[i]+'</li>’;
}
$(‘#k’).html(str);
qu–;
setInterval(‘show()’,3000);
}

function suan(){
if(qu<=0){
qu = arr.length-1;
}else{
qu –;
}
}

function show(){
$(‘#k li:first’).before(‘<li style=”display:none;”><span style=”display:none;”>’+arr[qu]+'</span></li>’);
$(‘#k li:first’).slideDown(500,function(){$(‘#k li:first span’).fadeIn(500);});
$(‘#k li:last’).animate({ opacity:”0″,marginTop:”0″},500,”,function(){$(‘#k li:last’).remove();});
suan();
}
</script>
</head>
<body>
<div class=’dongtai’>
<ul id=”k”>
加载中…
</ul>
</div>
</body>
</html>

转载请注明：jQuery仿新浪微博和腾讯微博首页动态向下滚动效果 - 前端开发

该文章由前端开发于2012年01月17日发表在jquery分类下，你可以至底部留下评论。

原创文章转载请注明: jQuery仿新浪微博和腾讯微博首页动态向下滚动效果 | 前端开发

关键字: , , , ,

上一篇：

下一篇：

为您推荐

您可能还会对这些文章感兴趣

  • 2012-11-30jQuery实现带缩略图的焦点图滚动效果

    用到的js代码 $(function(){ $(".flashBanner").each(function(){ var timer; $(".flashBanner .mask img").click(function(){ var index = $(".f...

  • 2012-08-1423款jQuery图片滚动相册特效插件

    jQuery是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择。其中，jQuery 最令人印象深刻的应用之一就是对图片的处理，它可以让帮助你在你的项目中...

  • 2012-02-18jquery滚动新闻公告效果

    仿Twitter的公告效果：   方法如下： 1、HTML 部分： <ul id=”twitter”> <li>第一条消息</li> <li>第二条消息</li> <li>第...

  • 2016-12-20只会用jQuery前端到底low不low?

    如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，...

  • 2016-12-17jquery的$().each,$.each的区别

    在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().each,对于这个方法，在d...

  • 2016-12-15jquery加载外部文件（.txt .html)显示在网页上

    在web开发中常常需要用到jquery去动态的加载文件显示在网页上面，下面是实现的小方法，希望给大家一点提示，达到抛砖引玉的作用哦！！！ 效果图： 要加载显示的文件： 网页加载...

  • 2016-12-15javascript实现网页倒计时

    web开发中常常需要使用到网页倒计时功能，下面是实现方法： 效果图： 代码截图：

  • 2016-12-15jquery判断浏览器类型最新方法

    web开发中常常需要去判断浏览器的类型来做出对应得调整设置，这时我们就需要学会判断绝大多数的浏览器类型。jquery在1.9之后便取消了$.browser用$.support取而代之，今天就来告诉...

  • 2016-12-15jquery点击返回页面头部滑动动画

    web开发中我们常常用点击返回头部的效果，下面我们就贴出代 码，共大家参考哈 代码截图： 说明：

  • 2016-12-15jQuery实现文字闪烁特效

    今天给大家介绍一个小特效–文字闪烁，web开发网页中常常使用到哦！ 效果截图： 代码截图：

猜你喜欢

大家正在看

阅读排行榜

热门标签

jquery插件 wap网站开发 郑州前端开发 前端开发 web前端开发 jquery特效 网页设计 手机网站开发 手机浏览器兼容 css bug 手机网站制作 郑州网页设计 css div jquery实例 web规范 jquery 3g网 css经验

本月热门

www.wufangbo.com 前端开发-WEB前端开发-专业前端开发网站

郑州前端开发 | web前端开发 | 郑州页面重构 | 前端开发-WEB前端开发-专业前端开发网站 站点地图 关于我