css样式代码
.tieba{width: 100%; float: left; height: 400px; margin-top: 15px; border: 1px solid #dedede; overflow: hidden;} .tiebalist{width: 90%; float: left; margin-left: 5%; overflow: hidden;} .tiebalist li{width: 100%; float: left; margin-top: 20px;} .tiebalist li .tbimg{width: 90px; height: 90px; float: left;} .tiebalist li .tb_text{width: 185px; float: left; margin-left: 10px;} .tiebalist li .tb_text span{display: block; width: 100%; height: 24px; overflow: hidden; font-size: 16px; color: #444;} .tiebalist li .tb_text p{width: 100%; display: block; height: 66px; line-height: 22px; overflow: hidden; font-size: 14px; margin-top: 5px; color: #777;}
前端html代码
<div class="tieba"> <ul class="tiebalist"> <li> <img src="img/shoplogo.jpg" class="tbimg"> <div class="tb_text"><span>1宝宝有小情绪啦啦</span><p>宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小啦</p></div> </li> <li> <img src="img/shoplogo.jpg" class="tbimg"> <div class="tb_text"><span>2宝宝有小情绪啦啦</span><p>宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小啦</p></div> </li> <li> <img src="img/shoplogo.jpg" class="tbimg"> <div class="tb_text"><span>3宝宝有小情绪啦啦</span><p>宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小啦</p></div> </li> <li> <img src="img/shoplogo.jpg" class="tbimg"> <div class="tb_text"><span>4宝宝有小情绪啦啦</span><p>宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小情绪啦宝宝有小啦</p></div> </li> </ul> </div>
JQ代码
$(function(){ var timing =setInterval("info()",3000); //每隔两秒进行一次滚动 $(".tiebalist").hover( function(){clearInterval(timing);}, function(){timing = setInterval("info()",3000);} ) }) function info(){ var li =$(".tiebalist>li:eq(0)").clone(); //复制第一个li //使用animate对li的外边距进行调整从而达到向上滚动的效果 $(".tiebalist>li:eq(0)").animate({marginTop:"-110px"},3000,function(){ $(".tiebalist>li:eq(0)").remove(); //对已经消失的li进行删除 $(".tiebalist").append(li); //把复制后的li插入到最后 }) }
版权声明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。