IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >Mr.Li的博客 >我要发文
UL中li向上滚动效果
作者:Mr.Li   发布时间:2018-12-14 14:23:34   点击数:107

样式代码

.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;}

前端代码

<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插入到最后
	})
}


本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter