标签：style blog http color java io ar cti
<!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>
标签：style blog http color java io ar cti
原文地址：http://www.cnblogs.com/lxpursue/p/3892585.html
