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>

li 逐个进入

时间： 2024-10-07 10:23:16

li 逐个进入的相关文章

前端面试题及答案整理（一）(转)

各公司秋招很快就开始了,最近在准备面试的东西,干脆将发现的各类面试题整理一下共享出来,大部分面试题是没有标准答案的,我给出的答案也是仅供参考,如果有更好的解答欢迎在评论区留言. Part1 手写代码现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现基本数组去重 Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.inde

放弃在每日站会上按成员逐个发言

很少有Scrum文献会说每日站会需要按团队成员逐个发言.然而大多数团队恰恰都是这样做的,但这可能不是最好的方式. 当每日站会是逐个团队成员进行的时候,团队成员会很容易丢掉所讨论的待办事项的上下文.例如,可能第一位团队成员正在处理前两个产品待办事项,第二位团队成员正在处理第二个和第五个产品待办事项,第三位团队成员也在处理其中这些待办事项中的一个,同时花费少量精力处理另一个无人的待办事项. 对某些团队来说,通过逐个过产品待办事项来执行每日站会,能让团队比逐个团队成员进行对讨论的产品待办项更有感觉.当

js计算li不换行的情况下，ul的宽度--用于做有滚动的导航条

var lenght_li=0; $('.info_tab li').each(function(){ lenght_li+=$(this).outerWidth(true); }); $('.info_tab').css({ 'width':lenght_li+1 });

js点击图片删除子标签li

上图的效果图请看下面点击图片部分会删除子标签li部分

c语言：用fgetc函数从键盘逐个输入字符，用fputc函数写到磁盘文件

用fgetc函数从键盘逐个输入字符,用fputc函数写到磁盘文件. 解:程序: #include<stdio.h> #include<stdlib.h>//exit使程序终止 int main() { FILE* fp; char ch, filename[10]; printf("请输入所用的文件名:"); scanf("%s", &filename); if ((fp = fopen(filename, "w"

$('div','li')

要搞清楚$('div','li') 和 $('div , li') 和 $('div li') 区别$('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div , li')才是找所有的div和li,之间不存在父子关系 $('div li') 是找div里面所有li,包括子级,孙子级,总之就是div里面所有li,不管有几层关系 $('div','li')

如何处理在html中 li 的高度自适应（且li里面的内容有浮动的情况下）

废话不多说,我们写贴出代码这个是 Html 代码 <div class="main"> <ul> <li> <div class="main-left">23</div> <div class="main-right"> <p>text1</p> <p>text2</p> </div> </li> &l

ui li 形式的菜单实现页面跳转

/*跳转*/ jumpEditRectificatBill:function(){ $("#getEquipLegerFrom li").each(function(){ //var jumpid=$(this).attr("id"); $(this).on("tap",function(){ //tap用于mobile,click用于PC // $("#getEquipLegerFrom").hide(); // li

无序列表li横向排列的间隙问题

今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后),会变成这样,中间会有间隙. 即便是将外边距.内边距都设为0后,还是有间隙.在调试了很久,还是没法解决这个问题,最后我改变了一下li的位置,结果可以了.我是这样做的. 改变li的位置后,结果如下: 好,问题成功解决了.不知园友们还有没有其他的好办法,欢迎指教.