jQuery模拟新浪微博首页滚动效果的方法

前端技术 2023/09/08 JavaScript

本文实例讲述了jQuery模拟新浪微博首页滚动效果的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:
<!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>
<script type=\"text/javascript\" src=\"js/jquery.min.js\"></script>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>无标题文档</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=\"#\"><img src=\"img/1.jpg\" /></a>
        <p class=\"vright\">人生若只如初见</p>
    </li>
    <li> <a href=\"#\"><img src=\"img/2.jpg\" /></a>
        <p class=\"vright\">何事秋风悲画扇</p>
    </li>
    <li> <a href=\"#\"><img src=\"img/3.jpg\" /></a>
        <p class=\"vright\">等闲变却故人心</p>
    </li>
    <li> <a href=\"#\"><img src=\"img/4.jpg\" /></a>
        <p class=\"vright\">却道故人心易变</p>
    </li>
  </ul>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20910

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案