注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

仿新浪微博“大家正在说”渐入轮显滚动效果  

2011-03-25 09:30:17|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!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>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="con">
  <ul>
    <li>
      <a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
      <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。作相思。</p>
    </li>
    <li>
      <a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
      <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
    </li>
    <li>
      <a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
      <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
    </li>
    <li>
      <a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
      <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
    </li>
  </ul>
</div>
</body>
</html>
  评论这张
 
阅读(1114)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017