以下是 jQuery仿新浪微博大厅滚动效果v2.0特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.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" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!--jQuery-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--jQuery动画暂停插件-->
<script type="text/javascript" src="js/jquery.pause.min.js"></script>
<!--滚动效果js-->
<script type="text/javascript" src="js/weiboscroll.js"></script>
</head>
<body>
<div id="box_title">大家正在说</div>
<div id="con">
<div class="bottomcover" style="z-index: 2;"></div>
<ul>
<li>
<div class="div_left">
<a href="#">
<img src="http://tp4.sinaimg.cn/1777258407/50/5627346616/1" title="Jarvis_风"></a>
</div>
<div class="div_right">
<a href="http://weibo.com/1866580377" target="_blank">Jarvis_风</a>：唉，总是在越忙的时候事情越多。。。我的神曲你在哪里呀~~~亲耐滴·你再不出来你就木有人疼了！！#248#
<div class="twit_item_time">3分钟前</div>
</div>
</li>
<li>
<div class="div_left">
<a href="#">
<img src="http://tp4.sinaimg.cn/1777258407/50/5627346616/1" title="Jarvis_风"></a>
</div>
<div class="div_right">
<a href="http://weibo.com/iletui" target="_blank">Jarvis_风</a>：看来今天收到礼品的亲们不少哦~
<div class="twit_item_time">13分钟前</div>
</div>
</li>
<li>
<div class="div_left">
<a href="#">
<img src="http://tp4.sinaimg.cn/1777258407/50/5627346616/1" title="Jarvis_风"></a>
</div>
<div class="div_right">
<a href="#" target="_blank">Jarvis_风</a>：【打扰了，@EsonLong_摄视度，微博网友请您帮助】“ 请问係广州有冇鸿福堂吖？想试试啊，平时静係 ...”帮助回答请点击 http://t.cn/zlkBOng ，谢谢！[不想被求助点击http://t.cn/zWxO0pe ]
<div class="twit_item_time">16分钟前</div>
</div>
</li>
<li>
<div class="div_left">
<a href="#">
<img src="http://tp4.sinaimg.cn/1777258407/50/5627346616/1" title="Jarvis_风"></a>
</div>
<div class="div_right">
<a href="http://weibo.com/2634155653" target="_blank">Jarvis_风</a>：【新型电话骗局盯上有线电视用户】一些市民接到陌生电话，提醒自家的宽带和有线电视就要到期了，在两小时内不续费就要被断网。警方提醒，这是一种新的电话骗局方式，骗子的最终目的是让受害人把资金转移到所谓的“安全账户”里。警方提醒大家万一遇到类似情况，可以拨打正规客服电话咨询哦。
<div class="twit_item_time">17分钟前</div>
</div>
</li>
<li>
<div class="div_left">
<a href="#">
<img src="http://tp4.sinaimg.cn/1777258407/50/5627346616/1" title="Jarvis_风"></a>
</div>
<div class="div_right">
<a href="http://weibo.com/pixarwalle" target="_blank">Jarvis_风</a>：【什么时候才能看见外星人啊】《西班牙渔夫意外拍的军方与飞碟UFO对峙》 http://t.cn/zlkBKQ4 （分享自 @土豆网）
<div class="twit_item_time">18分钟前</div>
</div>
</li>
<li>
<div class="div_left">
<a href="#">
<img src="http://tp4.sinaimg.cn/1777258407/50/5627346616/1" title="Jarvis_风"></a>
</div>
<div class="div_right">
<a href="http://weibo.com/pixarwalle" target="_blank">Jarvis_风</a>：小小骑手牵着小小马儿。你俩是来参加卖萌大赛的吧！！！！
<div class="twit_item_time">22分钟前</div>
</div>
</li>
<li>
<div class="div_left">
<a href="#">
<img src="http://tp4.sinaimg.cn/1777258407/50/5627346616/1" title="Jarvis_风"></a>
</div>
<div class="div_right">
<a href="http://weibo.com/pixarwalle" target="_blank">Jarvis_风</a>：学会沉默，至少平静。有时候，被人误解，不想争辩，所以选择沉默。本来就不是所有人都得了解你，因此不必对全世界喊话。生命中往往有连舒伯特都无言以对的时刻，毕竟不是所有的是非都能条列清楚，甚至可能根本没有真正的是与非。那么，不想说话，就不说吧，在多说无益的时候，也许沉默就是最好的解释。
<div class="twit_item_time">1小时前</div>
</div>
</li>
</ul>
</div>
</body>
</html>JS代码(weiboscroll.js):
$(function (){
var scrtime;
var $ul = $("#con ul");
var liFirstHeight = $ul.find("li:first").height();
//��һ��li�ĸ߶� $ul.css({
top:"-" + liFirstHeight - 20 + "px"}
);
//����css��top���Խ���һ��li�������б��Ϸ� ��li������padding:10px����Ҫ-20 $("#con").hover(function (){
$ul.pause();
//��ͣ���� clearInterval(scrtime);
}
,function (){
$ul.resume();
//�ָ����Ŷ��� scrtime = setInterval(function scrolllist(){
//������ʽչ�ֵ�һ��li $ul.animate({
top:0 + "px"}
,1500,function (){
//�������ʱ $ul.find("li:last").prependTo($ul);
//��ul�����һ������li����Ϊul�ĵ�һ��li liFirstHeight = $ul.find("li:first").height();
//�ղ����li�ĸ߶� $ul.css({
top:"-" + liFirstHeight - 20 + "px"}
);
//����css��top���Խ��ղ����li�������б��Ϸ� ��li������padding:10px����Ҫ-20}
);
}
,3300);
}
).trigger("mouseleave");
//ͨ��trigger("mouseleave")����������hover�¼��ĵ�2������}
);
CSS代码(style.css):
*{margin:0;padding:0;}
ul,li{list-style-type:none;}
body{font-size:13px;background-color:#f0f0f0;color:#666666;}
#box_title{width:394px;margin:0px auto;font-weight:bold;line-height:28px;font-size:14px;}
#con{width:394px;height:540px;margin:0px auto;position:relative;border-top:1px solid #d6d6d6;background-color:#FFF;overflow:hidden;}
#con .bottomcover{position:absolute;bottom:0;background:url("../images/halftransp.png") no-repeat 0 -5px;height:35px;width:394px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.t.sinajs.cn/t35/style/images/tlogin/halftransp.png?id=1341302813656',sizingMethod='crop');pointer-events:none;}
img{border:none;}
#con ul{position:relative;margin:0px 10px 0px 10px;top:0;left:0;padding:0;}
#con ul li{width:100%;border-top:1px dotted #d6d6d6;padding:10px 0;_padding:8px 0;overflow:hidden;line-height:1.5;}
#con ul li .div_left{float:left;width:50px;border:1px solid;}
#con ul li .div_right{float:right;width:305px}
#con ul li .div_right a{color:#6EAFD5;padding:0px;}
#con ul li .div_right .twit_item_time{color:#999;padding:0px;}
分享到QQ
分享到微博
微信扫一扫
