JS+CSS仿新浪微博首页“大家正在说”渐入轮显效果

<! 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" >
      <!-- 把下面代码加到<head>与</head>之间 -->
      < style  type ="text/css" >
     *
{ margin: 0; padding: 0;}
     ul,li
{ list-style-type: none;}
     body
{ font-size: 13px; background-color: #999999;}
     #con
{ width: 700px; height: 400px; margin: 10px auto; position: relative; border: 1px #666 solid; background-color: #FFFFFF; overflow: hidden;}
     #con ul
{ position: absolute; margin: 10px; top: 0; left: 0; padding: 0;}
     #con ul li
{ width: 100%; border-bottom: 1px #333333 dotted; padding: 20px 0; overflow: hidden;}
     #con ul li a
{ float: left; border: 1px #333333 solid; padding: 2px;}
     #con ul li p
{ margin-left: 68px; line-height: 1.5; padding: 10px;}
     
</ style >
      < script  type ="text/javascript"  src ="http://www.zzsky.cn/effect/images/jquery.js" ></ script >
      < script  language ="javascript" >
     $( function(){
       var scrtime;
      $("#con").hover( function(){
      clearInterval(scrtime);
      }, function(){
      scrtime = setInterval( function(){
       var $ul = $("#con ul");
       var liHeight = $ul.find("li:last").height();
      $ul.animate({marginTop : liHeight+40 +"px"},1000, function(){
      $ul.find("li:last").prependTo($ul)
      $ul.find("li:first").hide();
      $ul.css({marginTop:0});
      $ul.find("li:first").fadeIn(1000);
      });
      },3000);
      }).trigger("mouseleave");
     });
      </ script >
      </ head >
      < body >
      <!-- 把下面代码加到<body>与</body>之间 -->
      < div  id ="con" >
      < ul >
      < li >
      < href ="http://frieboy168.blog.163.com/blog/#" >< img  src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
      < class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。作相思。 </ p >
      </ li >
      < li >
      < href ="http://frieboy168.blog.163.com/blog/#" >< img  src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
      < class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
      </ li >
      < li >
      < href ="http://frieboy168.blog.163.com/blog/#" >< img  src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
      < class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
      </ li >
      < li >
      < href ="http://frieboy168.blog.163.com/blog/#" >< img  src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
      < class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
      </ li >
      </ ul >
      </ div >
      </ body >
      </ html >

转载于:https://www.cnblogs.com/luowei/archive/2012/10/07/2713656.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值