tofacebook.com -专业IT技术社区 web前端小白案例,爱新鲜抽屉式特效 Web程序 - tofacebook.com-专业IT技术社区
142°

web前端小白案例,爱新鲜抽屉式特效 Web程序

标签:前端   小白   案例   特效   源码   

web前端小白案例,爱新鲜抽屉式特效
知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等。

对前端感兴趣或者正在学习web前端的小伙伴可以来前端群:189394454,每天都会有干货分享。
html代码:


<div id="box"&gt;
        <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>

web前端小白案例,爱新鲜抽屉式特效

标签:前端   小白   案例   特效   源码   

原文地址:http://blog.51cto.com/13457136/2087189


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: