软件开发培训班 >> 编程开发 >> JavaScript

仿新浪微博首页"大家正在说"渐入轮显效果

　　本文标签：渐入轮显

<!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> 
<title>仿新浪微博首页"大家正在说"渐入轮显效果</title> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<style type="text/css"> 
*{margin:0;padding:0;font-size:12px;} 
ul{width:300px;height:400px;overflow:hidden;margin:50px 0 0 100px;} 
li{width:300px;border-bottom:1px solid #eee;margin-bottom:20px;} 
h4{border-bottom:1px solid #eee;} 
</style> 
</head> 
<body> 
<ul> 
<li> 
<h4>1、吃早餐都中毒了</h4> 
<p>是不是有点全都，吃早餐竟然食物中毒啊？</P> 
<p>2分钟前</P> 
</li> 
<li> 
<h4>2、30城市房价增高进7成</h4> 
<p>房奴注定当今社会的年青人会很忙碌，一辈子会房子奔波……</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/net/html/76169.html"  target=_blank > 网站流量少怎么办？如何解决网站流量稀少的问题  </a></td><td><a href="http://www.zhujiangroad.com/game/news/2023/11m88779.html"  target=_blank > 张一鸣不再“充值”，字节游戏大撤退 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2023/8m88094.html"  target=_blank > B站的野望，百度的危机 </a></td><td><a href="http://www.zhujiangroad.com/hardware/news/2021/7a17525.html"  target=_blank > 强制关机电脑容易坏吗？最脆弱的竟是它！ </a></td></tr></table></div> 
<p>2分钟前</P> 
</li> 
<li> 
<h4>3、李玮峰进球了</h4> 
<p>李玮峰进球了，这是真的吗？</P> 
<p>2分钟前</P> 
</li> 
</ul> 
<script language="javascript"> 
var b=window.b||{}; 
b.roll=function (){ 
var me=this; 
setTimeout(function(){ 
me.x=document.getElementsByTagName("ul"); 
me.y=document.getElementsByTagName("li"); 
me.z=me.y.item(me.y.length-1); 
me.q=me.z.clientHeight; 
me.z.style.opacity=0; 
me.z.style.filter="alpha:(opacity=0)"; 
me.z.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+0+")"; 
me.z.style.height="0px"; 
me.x[0].insertBefore(me.z,me.y[0]); 
me.t=1; 
me.c=0 
me.i=setInterval(function(){ 
me.t++; 
me.z.style.height=Math.round(me.q*(me.t/50)*(me.t/50))+"px"; 
if(me.t>=50){clearInterval(me.i); 
me.d=setInterval(function(){ 
me.c+=0.02 
if("\v"=="v"){ 
me.z.style.filter="alpha:(opacity="+me.c*100+")"; 
me.z.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+me.c*100+")"; 
} 
me.z.style.opacity=me.c; 
if(me.c>=1){clearInterval(me.d);} 
},50) 
} 
},25) 
b.roll(); 
},5000); 
} 
new b.roll(); 
</script> 
</body> 
</html>

技术文章快速查找

java script编程起步（第三课）

CSS鼠标响应事件经过、移动、点击示例介绍

JSON JQUERY模板实现说明

Javascript倒计时代码

js编码、解码函数介绍及其使用示例

javascript 图片上传预览-兼容标准

基于Jquery的简单&简陋Tabs插件代码

利用腾讯的ip地址库做ip物理地址定位

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建