<!DOCTYPE html>
<html>
<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">
.dongtai {background:#f6f6f6; width:700px;border:1px solid #e2e2e2;height:200px;}
.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;}
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;}
.con {margin:20px;}
.con .dongtai {margin:10px 0px;}
</style>
<script type="text/javascript" src='
http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js '></script>
<script type="text/javascript">
var arr = new Array();
arr['0'] = '【小猪】：大家好！';
arr['1'] = '【小牛】：在这里大家可以互相分享技术心得。';
arr['2'] = '【小狗】：认识大家很高兴啊！';
var qu = arr.length-1;
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;">'+arr[qu]+'</li>');
$('#k li:first').slideDown(500);
$('#k li:last').animate({ opacity:"0",marginTop:"0"},500,'',function(){$('#k li:last').remove();});
suan();
}
</script>
</head>
<body>
<div class="con">
<div class="info">
<h1>jQuery仿新浪微博滚动效果</h1>
</div>
<div class='dongtai'>
<div class='tit'><h3>最新动态</h3></div>
<ul id="k">
加载中...
</ul>
</div>
</div>
</body>
</html>
分享到：
相关推荐
【jQuery仿新浪微博大厅滚动效果v2.0】是一款基于JavaScript库jQuery实现的动态滚动效果，旨在模拟新浪微博大厅的信息流更新模式。这个效果的核心在于利用jQuery的动画功能和特定的插件来实现信息的平滑滚动，使用户...
js特效脚本含源码和说明jQuery仿新浪微博大厅滚动效果v2.0本资源系百度网盘分享地址
关于【jQuery仿新浪微博首页滚动留言板插件】，这是一个基于jQuery的动态效果插件，它的设计灵感来源于新浪微博的首页。在微博平台上，用户发布的消息会以滚动的形式不间断地展示，这种设计既节省了页面空间，又为...
2. **选择元素**：使用jQuery的选择器选取需要应用滚动效果的元素，如`$("#scrollArea")`选取ID为`scrollArea`的元素。 3. **绑定事件**：使用`$(window).on("scroll", function() {...})`来监听窗口的滚动事件，当...
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...
jQuery完美仿新浪微博大厅无缝滚动效果 v2.0 新版 注意：请使用最新的jquery包，否则可能在非IE浏览器下出现显示BUG，最新版可到Jquery官网 www.jquery.com下载，由于jQuery本身动画无法暂停，故采用第三方重写动画...
【jQuery仿新浪微博动态显示】 在Web开发中，模拟社交媒体如新浪微博的动态加载效果是一项常见的需求。这涉及到前端JavaScript库jQuery的高效使用，以及Ajax技术来实现数据的异步加载。以下我们将深入探讨如何使用...
《jQuery高仿新浪微博图片显示插件深度解析》 在网页设计和开发中，图片的展示方式对于用户体验至关重要。尤其在社交媒体平台，如新浪微博，图片的加载速度和展示效果直接影响到用户的浏览体验。为了满足此类需求，...
jQuery完美仿新浪微博大厅无缝滚动效果 20121106新版 注意：请使用最新的jquery包，否则可能在非IE浏览器下出现显示BUG，最新版可到Jquery官网 www.jquery.com下载，由于jQuery本身动画无法暂停，故采用第三方重写...
主要介绍了jquery实现仿新浪微博评论滚动效果,基于jquery实现页面图文定时滚动效果,涉及jquery页面元素的遍历与样式的动态操作技巧,是一款经典的jquery滚动特效,非常具有实用价值,需要的朋友可以参考下
"jQuery 微博图文列表滚动切换效果"是常见的一种网页交互设计，它模拟了类似新浪微博的展示方式，通过滚动页面时，列表中的图片和文字内容自动平滑切换，为用户呈现丰富的信息流体验。 一、jQuery库的介绍 jQuery ...
【jQuery仿新浪微博大厅滚动效果特效代码】是一种在网页中实现类似新浪微博信息流滚动展示的技术，主要依赖于JavaScript库jQuery的高效处理能力和CSS样式来完成动态视觉效果。这种效果可以让网站的最新信息持续滚动...
仿新浪微博大厅动态向下滚动jQuery版，淡入浅出效果 注意：请使用最新的jquery包，否则可能在非IE浏览器下出现显示BUG，最新版可到Jquery官网 www.jquery.com下载
标题中的“jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动”是一个jQuery实现的动态效果，主要用于展示新浪微博上的图片和文字内容。这种效果可以使页面更生动，吸引用户的注意力，通常应用于新闻网站、社交...