jquery 仿微博实现内容自动向下滚动加载

最新推荐文章于 2018-10-26 21:22:18 发布

PHP学习与交流

最新推荐文章于 2018-10-26 21:22:18 发布

阅读量888

点赞数

分类专栏： JQUERY 文章标签：微博数据 jquery 向下滚动

本文链接：https://blog.csdn.net/Zhao1234567890123456/article/details/38525437

版权

JQUERY 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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="jquery.js"></script>
<title>jQuery仿微博文字向下滚动</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的第一个li中，如果是php动态加载，可以考虑通过ajax获取数据，jquery的prependTo加载到ul的前面
		$ul.find("li:first").hide();               //第一个元素隐藏
		$ul.css({marginTop:0});                    //将刚才的margin-top调整到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:420px; 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: }
#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="http://avatar.csdn.net/6/5/A/1_zhao1234567890123456.jpg" style="width:50px;height:50px;"/></a>
        <p class="vright">第一见面，在编写php的时候，总会遇到编码的问题，对于php页面的编码（不考虑参数的编码）解析顺序是怎么样的？ </p>
    </li>
    <li> <a href="#"><img src="http://avatar.csdn.net/6/5/A/1_zhao1234567890123456.jpg" style="width:50px;height:50px;"/></a>
        <p class="vright">第二见面，在编写php的时候，总会遇到编码的问题，对于php页面的编码（不考虑参数的编码）解析顺序是怎么样的？</p>
    </li>
    <li> <a href="#"><img src="http://avatar.csdn.net/6/5/A/1_zhao1234567890123456.jpg" style="width:50px;height:50px;"/></a>
        <p class="vright">第三见面，在编写php的时候，总会遇到编码的问题，对于php页面的编码（不考虑参数的编码）解析顺序是怎么样的？ </p>
    </li>
    <li> <a href="#"><img src="http://avatar.csdn.net/6/5/A/1_zhao1234567890123456.jpg" style="width:50px;height:50px;"/></a>
        <p class="vright">第四见面，在编写php的时候，总会遇到编码的问题，对于php页面的编码（不考虑参数的编码）解析顺序是怎么样的？ </p>
    </li>
  </ul>
</div>
</body>
</html>

实现效果如图：