双创--小米商场所用的中的伪动画

在这周小米官网的完善中增添了几个动画

1、图片的向上浮动

图片示例：

代码如下：

<ul>
    <li>
        <div class="one"><img src="../index/images/05972209-0c29-4f2f-9844-09de1093ab02.jpg" style="height: 220px;width: 296px"></div>
        <div class="two"></div>
    </li>
</ul>

样式效果代码：

   .two{
            position: absolute;

            width: 296px;
            background:red;
           height: 0px;
            z-index:123;
            transition: 2s;
        }
        li:hover .two{
          height: 100px;
            margin-top: -100px;
        }

其中主要运用css3中的transiton

transition: 允许CSS属性值在一定的时间区间内平滑的过渡，

            需要事件的触发，例如单击、获取焦点、失去焦点等

            transition:property duration timing-function delay;

                   property:CSS的属性，例如：width height 为none时停止所有的运动，可以为transform

                   duration:持续时间

                   timing-function:ease等

                   delay:延迟

                   注意：当property为all的时候所有动画

2、图片轮播的jq实现

这个是在网上引用别人的，自己还在通过css3来试着写还没写好，就先把这个方法写下：

<script>
    $(function(){
        var i=0;
        var big_banner_pic = $("#big_banner_pic");
        var allimg=$("#big_banner_pic li").length;
        function img_change(){
            var img_i=i*-1226+"px";
            big_banner_pic.animate({opacity:".2"},100,function(){
                big_banner_pic.css("left",img_i );
                big_banner_pic.animate({
                    opacity: "1"
                }, 100);
            })
        }
        function automatic(){
            i+=1;
            if(i>=allimg){
                i=0;
            }
            img_change();
        }
        change_self_time = setInterval(automatic, 3000);
        //轮播上一张下一张图标控制
        $("#big_center").hover(function(){
            clearInterval(change_self_time);
            $("#big_center").children().show();
        },function(){
            change_self_time = setInterval(automatic, 3000);
            $("#big_center").children().hide();
        })
        $("#big_center").click(function(){
            i += 1;
            if (i >= allimg) {
                i = 0;
            }
            img_change();
        })
        $("#big_banner_change_next").click(function(){
            i -= 1;
            if (i <= 0) {
                i = allimg - 1;
            }
            img_change();
        })
    })
</script>

感觉这个图片轮播有些bug，有时候刷新页面图片加载不出来，尴尬

3、图片的阴影浮动效果

效果代码：

.floor_goods_wrap_li:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    top: -5px;

就是加了一个阴影，然后是向上浮动，加一个动画的过渡，就可以浮动，也可以向上

4、窗口的固定工具栏

样式展示：

这个背景效果不太明显，所以看着跟没悬浮一样

方法如下：

#right_fbox{
    width:80px;
    height:330px;
    position: fixed;
    float: right;
    top:25%;
     left:50% ;
    background: #fafafa;
    z-index: 999;
    margin-left:600px;}