javascript

jQuery simulates the scrolling effect of the sina weibo home page

This paper illustrates the method of jQuery to simulate the scrolling effect of sina weibo homepage. Share with you for your reference. The specific implementation method is as follows:

<!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> Headless document </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"> Life if only as first see </p>
    </li>
    <li> <a href="#"><img src="img/2.jpg" /></a>
        <p class="vright"> What is the sad autumn wind painting fan </p>
    </li>
    <li> <a href="#"><img src="img/3.jpg" /></a>
        <p class="vright"> Easy to change but old people </p>
    </li>
    <li> <a href="#"><img src="img/4.jpg" /></a>
        <p class="vright"> But the truth is that people are fickle </p>
    </li>
  </ul>
</div>
</body>
</html>

I hope this article has been helpful to your jQuery programming.