仿新浪微博和腾讯微博首页滚动代码特效_网站常用

内容介绍

仿新浪微博和腾讯微博首页滚动代码特效，B5教程网推荐下载。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery实现模拟新浪微博和腾讯微博首页滚动效果_www.bcty365.com</title>
<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>
<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>
<body>
<div id="con">
  <ul>
    <li> <a href="http://www.bcty365.com/html/show-13-14-1.html"><img src="https://b5.mxunkeji.com/uploadfile/2014/0314/20140314082331398.jpg" width="120" height="120" /></a>
        <p class="vright">炫酷的电影频道焦点图代码（基于SuperSlide）</p>
    </li>
    <li> <a href="#"><img src="https://b5.mxunkeji.com/uploadfile/2014/0325/20140325100734480.jpg" width="120" height="120" /></a>
        <p class="vright">简单切换的Flash焦点图代码
         </p>
    </li>
    <li> <a href="http://www.bcty365.com/html/show-13-16-1.html"><img src="https://b5.mxunkeji.com/uploadfile/2014/0315/20140315080203292.jpg" width="120" height="120" /></a>
        <p class="vright">超大的jQuery大屏图片幻灯片代码</p>
    </li>
    <li> <a href="http://www.bcty365.com/html/show-13-25-1.html"><img src="https://b5.mxunkeji.com/uploadfile/2014/0319/20140319114812267.jpg" width="120" height="120" /></a>
        <p class="vright">环境交流大屏图片焦点图代码</p>
    </li>
  </ul>
</div>
</body>
</html>

本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行

运行代码复制代码另存代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

全站搜索

仿新浪微博和腾讯微博首页滚动代码特效

内容介绍

最新推荐

本周排行