<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery实现的向下推送图文信息滚动效果</title> <style type="text/css"> ul,li{ list-style-type:none;} #con{ width:760px; height:395px; margin:30px auto 10px auto; position:relative; border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;} #con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;} #con ul li{ width:100%; border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; } #con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;} #con ul li h4{height:22px; line-height:22px; margin-left:60px} #con ul li p{ margin-left:60px;line-height:22px; } </style> </head> <body> <div id="con"> <ul> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/50/1290146312/1" /></a> <h4><a href="#">李开复</a></h4> <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你； 境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出； 境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p> </li> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/50/1290146312/1" /></a> <h4><a href="#">李开复</a></h4> <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你； 境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出； 境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p> </li> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/50/1290146312/1" /></a> <h4><a href="#">李开复</a></h4> <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你； 境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出； 境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p> </li> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/50/1290146312/1" /></a> <h4><a href="#">李开复</a></h4> <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你； 境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出； 境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p> </li> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/50/1290146312/1" /></a> <h4><a href="#">李开复</a></h4> <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你； 境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出； 境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p> </li> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/50/1290146312/1" /></a> <h4><a href="#">李开复</a></h4> <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你； 境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出； 境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p> </li> </ul> </div> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime);//停止滚动 },function(){ scrtime = setInterval(function(){ var ul = $("#con ul"); var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度 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(); }); },3000); }).trigger("mouseleave"); }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » jQuery实现的向下推送图文信息滚动效果 喜欢 (0)or分享 (0)
