javascript - 判断 li - 10个li以内不执行,超过10个li时执行下边的代码
本文介绍了javascript - 判断 li - 10个li以内不执行,超过10个li时执行下边的代码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<div class="art-record" id="art-con">
<ul>
<li>
<h3>
<div class="tx">
<img src="images/portrait.jpg"/>
</div>
</h3>
<h4>XXX微信好友</h4>
<p>助力成功</p>
<h6>1朋友,是一辈子的</h6>
</li>
</ul>
</div>
$(function () {
var scrtime;
var $ul = $("#art-con ul");
var liFirstHeight = $ul.find("li:first").height();//第一个li的高度
$ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将第一个li隐藏在列表上方 因li的上下padding:10px所以要-20
$("#art-con").hover(function () {
$ul.pause();//暂停动画
clearInterval(scrtime);
}, function () {
$ul.resume();//恢复播放动画
scrtime = setInterval(function scrolllist() {
//动画形式展现第一个li
$ul.animate({ top: 0 + "px" }, 1500, function () {
//动画完成时
$ul.find("li:last").prependTo($ul);//将ul的最后一个剪切li插入为ul的第一个li
liFirstHeight = $ul.find("li:first").height();//刚插入的li的高度
$ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将刚插入的li隐藏在列表上方 因li的上下padding:10px所以要-20
});
}, 5300);
}).trigger("mouseleave");//通过trigger("mouseleave")函数来触发hover事件的第2个函数
});
解决方案
如楼上所说,判断li数量
$(function () {
var liNum = $(".art-record ul li").length;
if(liNum > 10){
//超过10个执行
} else {
//10个以内执行
}
});
希望对你有帮助
这篇关于javascript - 判断 li - 10个li以内不执行,超过10个li时执行下边的代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文