一次web网站总结

之前公司是用flash做的这个网站，现在因为访问速度过慢或者别的原因，由我来用html5重新写过，排版布局和之前的都是一样的。

网页总体需要实现以下功能：

（1）背景图片轮播

（2）文字动画的实现

（3）导航条动画效果

（4）设计图片的展示效果（不知道怎么写，其实我还没弄明白它的实现原理，差不多就是图片的无缝滚动吧）

我主要是将前端布局实现，后台由php实现。现在我主要是总结一下本次学习到的知识。高手可以指点一下我这个菜鸟。

1、背景图片轮播html代码：

 

 <!--背景切换-->
    <div class="slide">
        <ul>
            <li style="background-image:url(images/home/bg1.jpg) "></li>
            <li style="background-image:url(images/home/bg2.jpg) "></li>
            <li style="background-image:url(images/home/bg3.jpg) "></li>
        </ul>
    </div>

 

实现轮播的js代码：

(function($){
    $.fn.fadeImages=function(options){
        var opt= $.extend({
           time:5000,//动画间隔时间
           fade:3000,//淡入淡出的动画时间
           dots:false//是否启用图片按钮
        },options);
        var t=parseInt(opt.time),
            f=parseInt(opt.fade),
            d=opt.dots,
            i= 0,
            j= 0,
            k, l, m,set;
        m=$(this).find("ul li");
        l= m.length;
        //初始化
        m.hide().eq(0).css("z-index","2").fadeIn(f);
        //图片切换函数
        function show(i){
            m.eq(i).css("z-index",2).fadeIn(f).siblings().css("z-index",1).fadeOut(f);
        }
        //图片自动播放函数
        function play(){
            if(i++<l-1){
                set=setTimeout(function(){
                    show(i);
                    play();
                },t+f)
            }else{
                i=-1;
                play();
            }
        }
        play();
    }
}(jQuery));

最后要在页面内调用这个方法：

<script>
$(document).ready(function(){
    $(".slide").fadeImage();
})
</script>

效果如下：

下面我用setInterval()实现：

$.fn.fadeImage=function(){
            var opt= {
                time:1000,//图片切换时间间隔
                fade:1000
            };
            var t=parseInt(opt.time),
                f=parseInt(opt.fade),
                obj=$(this).find("ul li"),
                i= 0,
                l=obj.length;
            //初始化图片
            obj.hide().eq(0).css("z-index","2").fadeIn(f);
//            console.log(l);
            function show(i){
                obj.eq(i).css("z-index","2").fadeIn(f).siblings().css("z-index","1").fadeOut(f);
            }
            function play(){
                i++;
                if(i<l){
                    show(i);
                }else{
                    i=-1;
                }
            }
            setInterval(function(){
                play();
            },t+f);


        };
        $(document).ready(function(){
            $(".slide").fadeImage();
        })

SetInterval为自动重复，setTimeout不会重复。也就是说setTimeOut既定的时间间隔后只执行一次。

2、文字动画的实现

<div class="nav">
        <div class="nav-list">
            <div class="en"><a href="proeile.html">PROEILE</a></div>
            <div class="ch"><a href="proeile.html">诠释</a></div>
        </div>
        <div class="nav-list">
            <div class="en"><a href="services.html">SERVICES</a></div>
            <div class="ch"><a href="services.html">服务范畴</a></div>
        </div>
        <div class="nav-list">
            <div class="en"><a href="projects.html">PROJECTS</a></div>
            <div class="ch"><a href="projects.html">主要项目</a></div>
        </div>
        <div class="nav-list">
            <div class="en"><a href="cooperation.html">COMPANY</a></div>
            <div class="ch"><a href="cooperation.html">合作机构</a></div>
        </div>
        <div class="nav-list">
            <div class="en"><a href="news.html">NEWS</a></div>
            <div class="ch"><a href="news.html">公司动态</a></div>
        </div>
        <div class="nav-list">
            <div class="en"><a href="join-us.html">JIONS US</a></div>
            <div class="ch"><a href="join-us.html">人才招贤</a></div>
        </div>
        <div class="nav-list">
            <div class="en"><a href="contact.html">CONTACT</a></div>
            <div class="ch"><a href="contact.html">联系</a></div>
        </div>
    </div>

纯css实现：

.nav{
    position: absolute;
    /* 600px;*/
    text-align: center;
    height: 40px;
    left: 30%;
}
.nav-list {
    width: 100px;
    height: 40px;
    position: relative;
    font-family: "Microsoft YaHei", "微软雅黑", Georgia, Serif;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    float: left;
}
.nav-list div {
    width: 100px;
    height: 40px;
    line-height: 50px;
    position: absolute;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.nav-list .en {
    top: 0;
    left: 0;
    z-index: 1;
    color: #FFF;
}
.nav-list:hover .en {
    top: -40px;
    left: 0;
}
.nav-list .en a {
    color: #FFF;
    text-decoration: none;
}
.nav-list .ch {
    bottom: -40px;
    left: 0;
    z-index: 2;
    color: #FFF;
}
.nav-list:hover .ch {
    bottom: 0;
    left: 0;
}
.nav-list .ch a {
    color: #FFF;
    text-decoration: none;
}

3、文字动画

文字动画我用到了css3的animation，就拿主页的动画做例子

<div class="content">
    <ul>
        <li><a href="proeile.html">诠释<span>PROEILE</span></a></li>
        <li><a href="services.html">服务范畴<span>SERVICES</span></a></li>
        <li><a href="projects.html">主要项目<span>PROJECTS</span></a></li>
        <li><a href="cooperation.html">合作机构<span>COOPERATION AGENCIES</span></a></li>
        <li><a href="news.html">公司动态<span>COMPANY NEWS</span></a></li>
        <li><a href="join-us.html">人才招贤<span>PERSONNEL RECRUITMENT</span></a></li>
        <li><a href="contact.html">联系<span>CONTACT</span></a></li>
    </ul>
</div>

css：

.content ul li:nth-child(1){
    -webkit-animation:txt-up 1.5s ease 1s both;
}
.content ul li:nth-child(2){
    -webkit-animation:txt-up 1.5s ease 1.5s both;
}
.content ul li:nth-child(3){
    -webkit-animation:txt-up 1.5s ease 2.0s both;
}
.content ul li:nth-child(4){
    -webkit-animation:txt-up 1.5s ease 2.5s both;
}
.content ul li:nth-child(5){
    -webkit-animation:txt-up 1.5s ease 3s both;
}
.content ul li:nth-child(6){
    -webkit-animation:txt-up 1.5s ease 3.5s both;
}
.content ul li:nth-child(7),
.right ul li:nth-child(6){
    -webkit-animation:txt-up 1.5s ease 4s both;
    animation:txt-up 1.5s ease 4s both;
    -moz-animation:txt-up 1.5s ease 4s both;
    -ms-animation:txt-up 1.5s ease 4s both;
}

.right ul li:nth-child(7){
    -webkit-animation:txt-up 1.5s ease 4.5s both;
}
@-webkit-keyframes txt-up{
    0%{
        opacity:0;
        -webkit-transform:translateY(500px);
    }
    60%{
        opacity:1;
        -webkit-transform:translateY(-10px);
    }
    80%{
        -webkit-transform:translateY(10px);
    }
    100%{
        -webkit-transform:translateY(0);
    }
}

其实我觉得我现在这个实现方法很差劲，因为不利于后台添加新的内容。试着用js代码来实现，效果还不错。

    $.fn.txtSlideUp=function(){
        var obj=$(this).find("ul li"),
            l=obj.length,
            count= 0,
            i= 0,
            newClass="slideUp"+(count++),
            time = 1;
        $("<style>" +
          "."+newClass+"{-webkit-animation:txt-up 1.5s ease "+time+"s both;}" +
          "</style>").appendTo("head");
        obj.eq(0).addClass(newClass);

        function play(){
           i++;
           newClass="slideUp"+(count++);
           time += 0.5;
           $("<style>" +
                   "."+newClass+"{-webkit-animation:txt-up 1.5s ease "+time+"s both;}" +
                   "</style>").appendTo("head");

           if(i<l){
                   obj.eq(i).addClass(newClass);
               }else{
                   clearInterval(set1);
           }
        }
        var set1=setInterval(function(){
            play();
        },0);
    };
    $(document).ready(function(){
        $(".content").txtSlideUp();
    });

哈哈，好高兴的噢，菜鸟，加油！！！

还有另一个文字点击效果：

这个实现起来其实也很简单，只用一句代码就可以搞定了

<div class="menu-list">
        <div class="main main_an1">酒店<span>HOTEL</span></div>
        <div class="sub_list">
            <a href="showPic.html">佛山华美达酒店</a>
            <a href="showPic.html">海南龙泉大酒店</a>
            <a href="showPic.html">新乡和颐鑫地酒店</a>
            <a href="showPic.html">柳州宾馆</a>
        </div>
        <div class="main main_an2">餐饮<span>RESTAURANT</span></div>
        <div class="sub_list">
            <a href="showPic.html">广州酒家旧机场店</a>
            <a href="showPic.html">广州酒家天极品越华路店</a>
            <a href="showPic.html">广州酒家天极品花城店</a>
            <a href="showPic.html">潮珍苑酒家</a>
            <a href="showPic.html">广州鹅潭一号</a>
            <a href="showPic.html">本厨椰子鸡汤</a>
            <a href="showPic.html">中惠兰堡餐厅</a>
            <a href="showPic.html">中惠兰堡养生馆</a>
        </div>
        <div class="main main_an3">地产<span>ESTATE</span></div>
        <div class="sub_list">
            <a href="showPic.html">中惠璧珑湾</a>
            <a href="showPic.html">虎门国际公馆</a>
            <a href="showPic.html">粤海丽江花园</a>
        </div>
</div>
<script>
    $(document).ready(function(){
        $(".main").click(function()
        {
            $(this).next("div.sub_list").slideToggle(300).siblings("div.sub_list").slideUp("slow");

        });
    });
</script>

 next()方法在jquery中是用来遍历节点的，取得每个匹配的元素的后一个同辈的元素集合，只有紧邻的同辈元素才会被匹配到。

 siblings()方法是查找每个匹配元素的所有同胞元素。

4、设计图展示方法（待更新）