首页 > 代码库 > li 逐个进入
li 逐个进入
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>* { margin:0; padding:0; }ul, li { list-style:none; }#box { margin:40px auto; height:600px; width:640px; border:1px solid red; overflow:visible; }#box p { float:left; width:100%; }#box span { float:left; display:block; height:40px; line-height:40px; margin-left:70px; text-align:center; cursor:pointer; border:1px dashed #fff; }#box span:hover { border:1px dashed red;}#box .cc { width:1200px; }#box dl { float:left; width:500px; height:480px; background:#ccc; margin:10px auto; border:1px solid red; margin-left:70px; }#box dl dd.dy { float:left; }#box dl dd.dy ul { margin:0 auto; padding:20px; overflow:hidden; }#box dl dd.dy ul li { float:left; height:28px; line-height:28px; margin-top:40px; font-size:30px; text-align:center; width:100%; }.current {}</style><script src="丰年/js/jquery-1.11.1.min.js" type="text/javascript"></script><script type="text/javascript">/*看效果时，可将 ul 中的 hidden 去掉 */$(function() { $(‘span‘).each(function(){ $(this).click(function() { $(‘.cc‘).animate({marginLeft:-575*$(this).index()+‘px‘}, 300); var oUl = $(‘.cc‘).find(‘ul‘).eq($(this).index()); var oLi = oUl.find(‘li‘); if(!$(this).hasClass(‘current‘)) { $(this).addClass(‘current‘).siblings().removeClass(‘current‘); //只能先添加后删除Class oLi.each(function() { $(this).css(‘marginLeft‘, 0); }); var x = 0; var y = oLi.length; function callBack() { if(x != y) { oLi.eq(x).stop().animate({marginLeft:-600+‘px‘}, 200); setTimeout(callBack,700); x++; } } callBack(); } }); });});</script></head><body><div id=‘box‘> <p><span class="current">这里是标题</span><span>商贩的等等</span></p> <div class="cc"> <dl> <dt>13213</dt> <dd class="dy"> <ul> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> </ul> </dd> </dl> <dl> <dt></dt> <dd class="dy"> <ul> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> </ul> </dd> </dl> </div> </div></body></html>
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>* { margin:0; padding:0; }ul, li { list-style:none; }#box { margin:40px auto; height:600px; width:640px; border:1px solid red; overflow:visible; }#box p { float:left; width:100%; }#box span { float:left; display:block; height:40px; line-height:40px; margin-left:70px; text-align:center; cursor:pointer; border:1px dashed #fff; }#box span:hover { border:1px dashed red;}#box .cc { width:1200px; }#box dl { float:left; width:500px; height:480px; background:#ccc; margin:10px auto; border:1px solid red; margin-left:70px; }#box dl dd.dy { float:left; }#box dl dd.dy ul { margin:0 auto; padding:20px; overflow:hidden; }#box dl dd.dy ul li { float:left; height:28px; line-height:28px; margin-top:40px; font-size:30px; text-align:center; width:100%; }.current {}</style><script src="丰年/js/jquery-1.11.1.min.js" type="text/javascript"></script><script type="text/javascript">/*看效果时，可将 ul 中的 hidden 去掉 */$(function() { $(‘span‘).each(function(){ $(this).click(function() { $(‘.cc‘).animate({marginLeft:-575*$(this).index()+‘px‘}, 300); var oUl = $(‘.cc‘).find(‘ul‘).eq($(this).index()); var oLi = oUl.find(‘li‘); if(!$(this).hasClass(‘current‘)) { $(this).addClass(‘current‘).siblings().removeClass(‘current‘); //只能先添加后删除Class oLi.each(function() { $(this).css(‘marginLeft‘, 0); }); var x = 0; var y = oLi.length; function callBack() { if(x != y) { oLi.eq(x).stop().animate({marginLeft:-600+‘px‘}, 200); setTimeout(callBack,700); x++; } } callBack(); } }); });});</script></head><body><div id=‘box‘> <p><span class="current">这里是标题</span><span>商贩的等等</span></p> <div class="cc"> <dl> <dt>13213</dt> <dd class="dy"> <ul> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> </ul> </dd> </dl> <dl> <dt></dt> <dd class="dy"> <ul> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ</li> </ul> </dd> </dl> </div> </div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。