前端小白案例-爱新鲜抽屉式特效制作

Posted 2020-10-27

知识点：企业布局技巧，如何高效的编写CSS样式，常用选择器，基本标签，动态布局，盒子模型，jquery类库调用，JS特效编写，JS编程思维等。

html代码：

        <div id="box">

            <div class="item">
                <img src="images/1.jpg" alt="美女" width="956" height="400"/><!--图片四要素-->
                <div class="line">爱新鲜</div>
            </div>
            <div class="item">
                <img src="images/2.jpg" alt="美女" width="956" height="400"/>
                <div class="line">一衣多穿</div>
            </div>
            <div class="item">
                <img src="images/3.jpg" alt="美女" width="956" height="400"/>
                <div class="line">评测擂台</div>
            </div>
            <div class="item">
                <img src="images/4.jpg" alt="美女" width="956" height="400"/>
                <div class="line">达人心经</div>
            </div>
            <div class="item">
                <img src="images/5.jpg" alt="美女" width="956" height="400"/>
                <div class="line">大咖卖场</div>
            </div>
        </div>

css代码：

        <style type="text/css">
        /*CSS层叠样式列表*/
        *{margin:0px;padding:0px;}/*通配符 1.对所有元素增加其样式  清楚所有默认内外边距 2.解决不同浏览器的兼容问题*/
        body{background:#000;/*背景颜色*/}
        #box{
            width:1120px;/*宽度 px像素*/
            height:400px;/*高度*/
            background:#fff;
            margin:120px auto 0px;/*上 左右(auto自动相等) 下*/
            position:relative;/*相对定位*/
            overflow:hidden;/*超出部分隐藏*/
        }
        #box .item{
            position:absolute;/*绝对定位
              一般找父级定位 是不区分绝对与相对的  意思就是说不管父级是绝对还是相对，都是可以当做参照物的
            */
            top:0px;
            left:0px;
        }
        #box .item .line{
            width:20px;
            height:260px;
            background:#000;
            position:absolute;
            left:0px;
            top:0px;
            font-size:18px;/*文字大小*/
            padding:140px 10px 0px;
            color:#fff;/*文字颜色*/
            font-family:"微软雅黑";/*文字样式*/
            cursor:pointer;/*鼠标样式*/
            opacity:0.8;/*CSS3 盒子透明  0-1*/
            border-left:1px solid #fff;/*左边框 粗细 样式  颜色*/
        }
        </style>

javascript代码：

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">

        var arr = [];//数组
        var i=0;
        //each是自动循环的意思 JQ方法  [0,41,41*2,41*3,41*4]
        $("#box .item").each(function(i){//遍历
            $(this).css("left",i*41+"px");
            arr[i] = i*41;//保存每一个item的left值
        });

        $("#box .item .line").click(function(){

            var _index = $(this).parent().index();//获取序列号

            $("#box .item").each(function(i){
                if (i<=_index)
                {
                    //符合条件部分
                    $(this).animate({left:arr[i]+"px"},500);
                }else{
                    //不符合条件部分
                    $(this).animate({left:arr[i]+915+"px"},500);
                }
            });

        });
        </script>