jQuery simulates the scrolling effect of the sina weibo home page

  • 2020-05-12 02:14:07
  • OfStack

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">
<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">
        var scrtime;
        scrtime = setInterval(function(){
                var $ul = $("#con ul");
                var liHeight = $ul.find("li:last").height();
                $ul.animate({marginTop : liHeight+40 +"px"},1000,function(){
<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;
#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;}
<div id="con">
    <li> <a href="#"><img src="img/1.jpg" /></a>
        <p class="vright"> Life if only as first see </p>
    <li> <a href="#"><img src="img/2.jpg" /></a>
        <p class="vright"> What is the sad autumn wind painting fan </p>
    <li> <a href="#"><img src="img/3.jpg" /></a>
        <p class="vright"> Easy to change but old people </p>
    <li> <a href="#"><img src="img/4.jpg" /></a>
        <p class="vright"> But the truth is that people are fickle </p>

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

Related articles: