一、首页Loading效果

这次就打算把几个功能全部写在一起展示啦，这样就得有个Loading页面，先把该载入的都载入进来。不然的话，代码没载入进来，这效果都看不到的，体验会很差。

前面写过一篇制作Loading效果的文章《多种方法实现Loading（加载）动画效果》，这次挑Sonic.js来实现下。

1、选了个我感觉比较酷的Loading样式：

2、然后想来个背景色，全屏的那种，我用了个position绝对定位来做。

.loading{
    background:#00BFF3;
    height:100%;
    text-align:center;
    position: absolute;
    top: 0;
    width: 100%;
}

3、在屏幕中间加个框，里面再加点阴影进来，暂时先把底色去掉

这里涉及到了多层阴影，box-shadow中有多个阴影设置，可以在线调试阴影效果，第一个可以做多层调试。

也可以在这里调试，不过就是第二个那里调试的话不能做出多层的效果。

.loading .shadow{
    margin: 100px auto 0;
    background: #fff;
    width: 70%;
    padding: 20px 0;
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
          -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -o-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
           -ms-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
}

接下来我想在底部与两边做点阴影加深操作，这里会使用到伪类:after,:before。z-index是让两个伪类的效果被盖在下面，而top、bottom等是为了控制阴影的位置，如果将z-index的值加大点就会看到两个伪类的效果是一个长方形。这里为了能将阴影显示出来，我得修改下.loading的样式，添加z-index属性，修改背景颜色其他属性不变。

.loading .shadow:before, .loading .shadow:after{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -ms-box-shadow::0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10%;
    bottom:0;
    left:10px;
    right:10px;
}

.loading{
    background:#F6FFD1;
    z-index:-2;
}

4、添加一个隐藏loading页面的脚本，loading页面在DOM绑定，图片载入后就不需要显示了。

window.onload = function() {
    //隐藏loading页面
    $('#loading_container').animate({translateY:'-100%'}, 1000,'linear');
};

我以前也做过一些CSS3动画的记录，可以在《CSS3中的动画效果记录》查看到。

二、底部菜单栏

1、以往的菜单栏布局不是用float就是用display:inline，这次我想试试用flex布局，可以快速的布局在一列，下图是部分菜单

.nav_container .flex{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}

2、接着我想在选中的那栏加一个三角形，以前写小三角非常复杂，有的方法是多写一个div然后绝对定位，或者是用图片等。现在有了after伪类，可以很方便的做三角形效果，注意下面的border，然后只要修改border-bottom-color就可以改变三角形的方向。

.nav_container .flex > a.cur:after{
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #821134;
    border-width: 1.2em;
    left: 50%;
    margin-left: -1.2rem;
}

3、添加选中特效，本来使用的click，但是在手机上面使用click是有300ms延时的。有多种解决方案，有一种是用插件fastclick，来解决那300ms延时，但是我这里都已经引用了zepto中的touch文件，所以就不想再引入额外的脚本。

我就用一串正则来判断是否是手机访问，是的话就用tap事件，不是的话就用click。这串正则的健壮性还不得而知，是在网上看到的，点击可以查看。

var event = 'click';
// device detection
if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) {
        event = 'tap';
}
$('#nav').delegate('a', event, function() {
        $(this).addClass('cur').siblings().removeClass('cur');
        var row = $(this).index();
        $('#menu').children().hide().eq(row).show().css('opacity', 0).animate({opacity:'1'}, 1000, 'ease-in-out', function() {
            if(row != 3) return;
            
            $.each(pieids, function(index, item) {
                if(pies.length <= index) {
                    var pie = draw_pie(piedatas[index], item);
                    pies.push(pie);
                }
            });
        });
        return false;
});

源码下载：

http://download.csdn.net/detail/loneleaf1/8849069

posted on 2015-06-29 10:08 咖啡机（K.F.J）阅读(2650) 评论(8) 编辑收藏举报

刷新页面返回顶部

一、首页Loading效果

二、底部菜单栏

公告