web前端 9 轮播图 && 动画 && 返回顶部 && 吸顶灯

2020-04-12

轮播图 && 动画 && 返回顶部 && 吸顶灯

轮播图

使用步骤
1）先把swiper.css 和 swiper.js 放到对应目录中
2）把下面代码写到主页中
HTML部分修改对应图片的src的位置和height

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/banner1.jpg" width="100%;" height="630"></div>
        <div class="swiper-slide"><img src="img/banner2.jpg" width="100%;" height="630"></div>
        <div class="swiper-slide"><img src="img/banner3.jpg" width="100%;" height="630"></div>
        <div class="swiper-slide"><img src="img/banner4.jpg" width="100%;" height="630"></div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next">1</div>
    <div class="swiper-button-prev"></div>
</div>
<div class="banner-nav-bg"></div>

CSS部分修改#banner中的height

<link rel="stylesheet" type="text/css" href="css/swiper.css">

    <style type="text/css">
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        #banner{
            height:630px;
        }

        .swiper-container {
            width: 100%;
            height: 632px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>

JS部分 effect值是轮播的方式

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

<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,


        
        speed: 1000,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        effect: 'fade',//  effect: 'flip','coverflow','slide', 'fade','cube'
        grabCursor: true,
        cube: {
            shadow: false,
            slideShadows: false,
            shadowOffset: 20,
            shadowScale: 0.94
        }
    });
</script>

动画

官网 http://www.animate.net.cn
注意：transtion动画不能和animate用在同一个元素上，使用嵌套div方式
使用步骤
1）引用animate.min.css 文件

1	<link rel="stylesheet" href="animate.min.css">

2）给指定的元素加上指定的动画样式名
查询对应动画效果 https://daneden.github.io/animate.css/
animated fadeInUp 第一个类名是固定的第二个是动画效果

1	<div class="animated fadeInUp"></div>

使用JQuery方式让滚动条滑动到固定位置才出现动画效果
1）引用jquery-1.11.3.js 文件和自定义index.js文件(直接在html文件中写也可以)

1 2	<script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript" src="js/index.js"></script>

2）编辑自定义index.js文件
$(window).scroll(function(){}); 监听鼠标滑动执行function
document.documentElement.scrollTop和document.body.scrollTop 获取当前滚动条距离浏览器顶端位置
$("#world").offset().top #world元素距离文档顶端距离
$(window).height() 浏览器高度
$(".a1").addClass("animated fadeInLeft show").removeClass("fade"); a1元素添加动画移动fade样式

// 监听鼠标滑动执行function
$(window).scroll(function(){
    // 获取当前滚动条距离浏览器顶端位置
    var scrollT=document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(scrollT);
    var backTop=$("#world").offset().top - $(window).height()/2;
    // console.log(backTop);
    if( scrollT > backTop){
        // a1元素添加动画移动fade样式
        $(".a1").addClass("animated fadeInLeft show").removeClass("fade");
        $(".a2").addClass("animated fadeInDown show").removeClass("fade");
        $(".a3").addClass("animated fadeInUp show").removeClass("fade");
        $(".a4").addClass("animated fadeInRight show").removeClass("fade");
    }
});

返回顶部

实现点击返回顶部按钮后会滚动条会慢慢移动到浏览器顶端

HTML部分
javascript:; 执行空JavaScript语句返回值为空，可以防止链接跳转

1	<div id="totop"><a href="javascript:;" id="btn"></a></div>

CSS部分

#totop #btn{
    width: 83px;
    height: 77px;
    background: url("../img/totop.png") no-repeat;
    position: fixed;
    top:600px;
    right: 10px;
    transform: scale(0.8);
}

JS部分
window.onload=function(){ } 页面加载时执行function
ele.onclick=function(){ } 给某个元素对象绑定点击事件来执行function
window.onscroll=function(){ } 监听鼠标滚动滚动条执行function

<script type="text/javascript">
    // 页面加载后执行
    window.onload=function(){
        // 1.找到页面中的按钮
        var totop=document.getElementById("btn");
        // 先让按钮隐藏起来
        totop.style.display="none";
        var timer=null;
        // 2.给按钮绑定点击事件
        totop.onclick=function(){
            // 使用周期定时器重复执行function
            timer=setInterval(function(){
                // 3.获取当前滚动条距离浏览器顶端的距离
                var backTop=document.documentElement.scrollTop || document.body.scrollTop;
                // 滚动条越滚越慢 每次滚动减少的距离speedTop
                var speedTop =backTop/8;
                document.documentElement.scrollTop=backTop-speedTop;
                if(backTop == 0){
                    clearInterval(timer);
                }
            },30);
        }

        // 按键是否显示
        // 设置临界值
        var pageHeight=700;
        window.onscroll=function(){
            var backTop =document.documentElement.scrollTop || document.body.scrollTop;
            if(backTop > pageHeight){
                totop.style.display="block";
            }else{
                totop.style.display="none";
            }
        }
    }
</script>

吸顶灯

让某个元素在滚动条滚动时一直保持在页面的顶部

JS部分

<!-- 导航栏吸顶灯 -->
<script type="text/javascript">
    window.onload=function(){
        // 1.找到页面中的导航栏nav
        var nav=document.getElementById("nav");
        // 2.找到导航栏距离浏览器顶端距离
        var navTop=nav.offsetTop;
        window.onscroll=function(){
            // 3.使用当前滚动条到浏览器距离和导航栏到浏览器距离作比较
            var backTop=document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(backTop);
            if(backTop>=navTop){
                nav.style.position="fixed";
                nav.style.top="0";
                nav.style.left="0";
                nav.style.zIndex="100";
            }else{
                nav.style.position="";
            }
        }
    }
</script>

练习：制作OPPO主页

知识点：
1）当前元素使用clear:both不起作用可以它的上个元素中使用overflow:hidden 清除浮动
2）图文并排使用自定义列表dl来完成 dt放背景图片 dd放文字
3）span元素做背景小图标要使用 display: inline-block 从行内元素来转换为行-块元素使用vertical-align: middle 居中
4）返回顶部使用 <a href="#"><img /></a>

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OPPO</title>
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.css">
    <style type="text/css">
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        #banner{
            height:630px;
        }


        .swiper-container {
            width: 100%;
            height: 632px;
        }


        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;


            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<!-- 页面顶部 -->
<div id="top">
    <div class="container">
    </div>
</div>    
<!-- 页面头部 -->
<div id="header">
    <div class="container">
        <div class="header_left left">
            <div class="xlwb"></div>
            <div class="txwb"></div>
            <div class="tel">4001-888-666</div>
        </div>
        <ul class="rigth">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">积分兑换</a></li>
            <li><a href="#">帮助中心</a></li>
            <li class="shop_car"><span></span><a href="#">购物车</a></li>
        </ul>
    </div>
</div>    
<!-- 导航条 -->
<div id="nav">
    <div class="container">
        <div class="logo left"><img src="img/logo.png" alt=""></div>
        <ul class="rigth">
            <li><a href="#">首页</a></li>
            <li><a href="#">手机</a></li>
            <li><a href="#">配件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">体验店</a></li>
            <li><a href="#">软件商店</a></li>
            <li><a href="#">ColorOS</a></li>
        </ul>
    </div>
</div>    
<!-- 轮播图-->
<div id="banner">
    <!-- <div class="container"></div> -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href=""><img src="img/banner1.jpg" width="100%;" height="630"></a></div>
            <div class="swiper-slide"><a href=""><img src="img/banner2.jpg" width="100%;" height="630"></a></div>
            <div class="swiper-slide"><a href=""><img src="img/banner3.jpg" width="100%;" height="630"></a></div>
            <div class="swiper-slide"><a href=""><img src="img/banner4.jpg" width="100%;" height="630"></a></div>


        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next">1</div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="banner-nav-bg"></div>
</div>    
<!-- 明星机型部分 -->
<div id="star">
    <div class="container">
        <div class="star_top">
            <div><img src="img/i-c-title.png" alt=""></div>
        </div>
    <ul>
        <li>
            <img src="img/20141030152751NRihyRENa7.jpg" alt="">
            <h2>N3</h2>
            <p>1600万电动旋转摄像头</p>
            <p class="money">&yen;3999 立即购买<span></span></p>
        </li>
        <li class="line"></li>
        <li>
            <img src="img/20141029162235J7aJmCHkFm.jpg" alt="">
            <h2>R5</h2>
            <p>薄至4.85mm</p>
            <p class="money">&yen;2999 立即购买<span></span></p>
        </li>
        <li class="line"></li>
        <li>
            <img src="img/20150120092342k2ABsEHnQN.jpg" alt="">
            <h2>R1C</h2>
            <p>砖石流光镜面</p>
            <p class="money">&yen;3999 立即购买<span></span></p>
        </li>
        <li class="line"></li>
        <li>
            <img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
            <h2>R31</h2>
            <p>镜在掌握</p>
            <p class="money">&yen;999 立即购买<span></span></p>
        </li>
    </ul>
    </div>
</div>    
<!-- 精选配件部分 -->
<div id="accessory">
    <div class="container">
        <div class="acc_top"><img src="img/wb.png" alt=""></div>
        <div class="acc_main">
            <div class="acc_left left">
                <div><img src="img/20150413174400N0dPnxUKHk.jpg" alt=""></div>
                <div class="acc_all">
                    <p>OPPO手机官网ACCESSORY 配件</p>
                    <ul>
                        <li>耳机</li>
                        <li>移动电源</li>
                        <li>保护壳</li>
                        <li>贴膜</li>
                        <li>皮套</li>
                        <li>数据线</li>
                    </ul>
                    <h2 class="line"></h2>
                    <p>全部配件<span></span></p>
                </div>
                <div><img src="img/20131120165101xYIYzhkVEy.jpg" alt=""></div>
                <div><img src="img/20150413174340NLV2gvV4FU.jpg" alt=""></div>
            </div>
            <div class="acc_rigth rigth">
                <div><img src="img/20150123182505RO822scYYt.jpg" alt=""></div>
                <div><img src="img/20141230145609l7Fsk7CdHy.jpg" alt=""></div>
                <div><img src="img/20141011101157yZEFpMrk0h.jpg" alt=""></div>
                <div><img src="img/201410270957132inlm3IwsV.jpg" alt=""></div>
            </div>
        </div>
    </div>
</div>    
<!-- 搜索OPPO部分 -->
<div id="world">
    <div class="container">
        <div class="world_top">
            <img src="img/weibo.png" alt="">
        </div>
        <div class="world_main">
            <div class="world_left left">
                <div class="a1 fade"><div><img src="img/201403261455420lqMPNGENc.png" alt=""></div></div>
                <div class="a2 fade"><div><img src="img/20150226100534QqezQ85N6y.jpg" alt=""></div></div>
                <div class="a3 fade"><div><img src="img/20140926184007v2rjcVFcbW.jpg" alt=""></div></div>
                <div class="a4 fade"><div><img src="img/20131212113902waaLqQUWfB.jpg" alt=""></div></div>
            </div>
            <div class="world_right rigth">
                <div class="world_title">
                    <div class="new">新闻</div>
                    <div class="weibo">微博</div>
                </div>
                <ul>
                    <li>
                        <dl>
                            <dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
                            <dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><img src="img/201502271135596D2wBJxvH0.jpg" alt=""></dt>
                            <dd>OPPO 手机携手时尚大咖 首度打造杂志封面大片</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><img src="img/20140604145924CFBnAtVjqN.jpg" alt=""></dt>
                            <dd>业界革命 OPPO发布全球最高灵敏度平面振膜耳机PM-1</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
                            <dd>极致原音 OPPO PM-1耳机斩获EISA年度HIFI大奖</dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>    
<!-- 页面服务部分 -->
<div id="serve">
    <div class="container">
        <ul>
            <li>
                <dl>
                    <dt class="dt1"></dt>
                    <dd class="dd1">正品保障</dd>
                    <dd class="dd2">所有产品都是原装正品</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt class="dt2"></dt>
                    <dd class="dd1">79元起包邮</dd>
                    <dd class="dd2">高效的物料直达配送</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt class="dt3"></dt>
                    <dd class="dd1">7天退换货</dd>
                    <dd class="dd2">支持7天退货 30天换货</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt class="dt4"></dt>
                    <dd class="dd1">285自提点</dd>
                    <dd class="dd2">轻松自在 覆盖各大城市</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt class="dt5"></dt>
                    <dd class="dd1">356家客服网点</dd>
                    <dd class="dd2">专业保障服务就在家门口</dd>
                </dl>
            </li>
        </ul>
    </div>
</div>    
<!-- 售后服务部分 -->
<div id="after_serve">
    <div class="container">
        <ul>
            <li>
                <ol>
                    <li><p>关于我们</p></li>
                    <li><a href="#">关于OPPO</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">招聘中心</a></li>
                </ol>
            </li>
            <li>
                <ol>
                    <li><p>推荐机型</p></li>
                    <li><a href="#">N3</a></li>
                    <li><a href="#">R5</a></li>
                    <li><a href="#">R1C</a></li>
                    <li><a href="#">Find 7</a></li>
                </ol>
            </li>
            <li>
                <ol>
                    <li><p>购物相关</p></li>
                    <li><a href="#">购物中心</a></li>
                    <li><a href="#">周边产品</a></li>
                    <li><a href="#">OPPO体验店</a></li>
                    <li><a href="#">客户服务政策</a></li>
                </ol>
            </li>
            <li>
                <ol>
                    <li><p>会议中心</p></li>
                    <li><a href="#">产品注册</a></li>
                    <li><a href="#">会员注册</a></li>
                    <li><a href="#">会员登录</a></li>
                </ol>
            </li>
            <li>
                <ol>
                    <li><p>关注我们</p></li>
                    <li><span class="xlwb"></span><a href="#">新浪微博</a></li>
                    <li><span class="txwb"></span><a href="#">腾讯微博</a></li>
                    <li><span class="rrw"></span><a href="#">人人网</a></li>
                    <li><span class="qqkj"></span><a href="#">QQ空间</a></li>
                </ol>
            </li>
            <li>
                <ol>
                    <li><p>联系我们</p></li>
                    <li><p class="telnum"><span class="tel"></span>4001-888-666</p></li>
                    <li><a href="#">7*24小时客服电话</a></li>
                    <li><p class="onlinefont"><span class="online"></span>在线客服</p></li>
                    <li><a href="#">服务时段: 8:30-22:00</a></li>
                </ol>
            </li>
        </ul>
    </div>
</div>    
<!-- 底部 -->
<div id="footer">
    <div class="container">
        <p>
            <img src="img/i-f-logo.png" alt="">
            <span>© 2004 - 2020 OPPO 版权所有 粤ICP备08130115号-1</span>
            <a href="#">版权说明</a>
            <a href="#">使用协议</a>
            <a href="#">网站地图</a>
            <a href="#">友情链接</a>
            <a href="#">联系我们</a>
        </p>
    </div>
</div>
<!-- 返回顶部-->
<div id="totop"><a href="javascript:;" id="btn"></a></div>

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,

        speed: 1000,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        effect: 'fade',//  effect: 'flip','coverflow','slide', 'fade','cube'
        grabCursor: true,
        cube: {
            shadow: false,
            slideShadows: false,
            shadowOffset: 20,
            shadowScale: 0.94
        }
    });
</script>

<!-- 返回顶部 -->
<script type="text/javascript">
    // 页面加载后执行
    window.onload=function(){
        // 1.找到页面中的按钮
        var totop=document.getElementById("btn");
        // 先让按钮隐藏起来
        totop.style.display="none";
        var timer=null;

        // 设置吸顶灯元素
        // 1.找到页面中的导航栏nav
        var nav=document.getElementById("nav");
        // 2.找到导航栏距离浏览器顶端距离
        var navTop=nav.offsetTop;

        // 2.给按钮绑定点击事件
        totop.onclick=function(){
            // 使用周期定时器重复执行function
            timer=setInterval(function(){
                // 3.获取当前滚动条距离浏览器顶端的距离
                var backTop=document.documentElement.scrollTop || document.body.scrollTop;
                // 滚动条越滚越慢 每次滚动减少的距离speedTop
                var speedTop =backTop/8;
                document.documentElement.scrollTop=backTop-speedTop;
                if(backTop == 0){
                    clearInterval(timer);
                }
            },30);
        }

        // 按键是否显示
        // 设置临界值
        var pageHeight=700;
        window.onscroll=function(){
            var backTop =document.documentElement.scrollTop || document.body.scrollTop;
            if(backTop > pageHeight){
                totop.style.display="block";
            }else{
                totop.style.display="none";
            }


            // 吸顶灯元素距离和滚动条距离比较
            if(backTop>=navTop){
                nav.style.position="fixed";
                nav.style.top="0";
                nav.style.left="0";
                nav.style.zIndex="100";
            }else{
                nav.style.position="";
            }

        }
    }
</script>

<!-- 导航栏吸顶灯 -->
<!-- <script type="text/javascript">
    window.onload=function(){
        // 1.找到页面中的导航栏nav
        var nav=document.getElementById("nav");
        // 2.找到导航栏距离浏览器顶端距离
        var navTop=nav.offsetTop;
        window.onscroll=function(){
            // 3.使用当前滚动条到浏览器距离和导航栏到浏览器距离作比较
            var backTop=document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(backTop);
            if(backTop>=navTop){
                nav.style.position="fixed";
                nav.style.top="0";
                nav.style.left="0";
                nav.style.zIndex="100";
            }else{
                nav.style.position="";
            }
        }
    }
</script> -->
</body>
</html>

CSS部分

/*初始化样式设置*/
*{
    margin: 0;
    padding: 0;
    font-size: 14px;
}

ul,ol{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: #666;
}

.left{
    float: left;
}
.rigth{
    float: right;
}

/*透明度0隐藏元素1显示元素*/
.fade{
    opacity: 0;
}
.show{
    opacity: 1;
}

/*测试*/
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_serve,#footer{
    height: 100px;
    width: 100%;
    /*border: 1px solid black;*/
}

.container{
    width: 1280px;
    /*border: 1px solid red;*/
    margin: 0 auto;
}

/*top部分样式*/
#top{
    height: 5px;
    background-color: #00925f;
}

/*header部分样式*/
#header{
    height: 30px;
    background-color: #2E2D2C;
}

#header .xlwb{
    width: 20px;
    height: 17px;
    background: url("../img/icons.png") no-repeat -47px -95px;
}

#header .txwb{
    width: 18px;
    height: 20px;
    background: url("../img/icons.png") no-repeat -24px -92px;
}

#header .header_left div{
    float: left;
    margin: 5px 10px 0;
    font-size: 14px;
}

#header ul li{
    float: left;
    line-height: 30px;
}

#header .tel{
    color: #01785E
}

#header li a{
    color: #B2B2B2;
    font-size: 14px;
    border-right: 1px solid #B2B2B2;
    padding: 0 15px;
}

#header li a:hover{
    color: #00925f;
}

/*购物车右边不需要竖线*/
#header .shop_car a{
    border-right: none;
    padding-left: 8px;
}

#header .shop_car span{
    width: 19px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    background: url("../img/icons.png") no-repeat 0 -95px;
}

/*设置nav样式*/
#nav{
    background-color: #EEEDEF;
    height: 90px;
}

#nav ul li{
    float: left;
    margin: 0 15px;
    line-height: 90px;
}

#nav li a{
    color: #666;
    font-weight: bold;
}

#nav li a:hover{
    color: #00925f;
}

/*设置明星机型样式*/
#star{
    height: 700px;
    background-color: #F3F2F2;
}

#star .star_top{
    text-align: center;
    margin: 10px;
}

#star ul{
    width: 1263px;
    margin: 10px auto;
    overflow: hidden;
}

#star li{
    width: 300px;
/*    border: 1px solid black;*/
    float: left;
    border-bottom: 4px solid #E0DFE0;
    transition: all 0.3s;
}

/*鼠标悬放时图片向上移动小距离*/
#star li:hover{
    border-bottom: 4px solid #00925f;
    transform: translateY(-10px);
}
#star li img{
    width: 300px;
}

#star li h2{
    text-align: center;
}

#star li p{
    text-align: center;
    margin: 10px 0;
    font-size: 12px;
    color: #BDBDBD;
}
#star li .money{
    font-size: 14px;
    color: #00925f;
}

/*价格旁边的小图标*/
#star li span{
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    background: url("../img/icons-1.png") no-repeat -178px -1015px;
}

#star .line{
    width: 0;
    height: 500px;
    border-left: 1px solid #EAEAEA;
    margin: 0 10px;
}

/*设置精选配件样式*/
#accessory{
    height: 950px;
    background-color: #F7F5F7;
    /*world元素中的clear: both不起作用可以再上个元素中使用overflow:hidden 清除浮动*/
    overflow: hidden;
}

#accessory .acc_top{
    text-align: center;
    margin: 20px auto;
}

#accessory .acc_main{
    width: 1110px;
    margin: 10px auto;
    /*overflow: hidden;*/
}

#accessory .acc_left{
    width: 540px;
/*    height: 950px;
    border: 2px solid black;*/
}

#accessory .acc_left div{
    float: left;
    border-bottom: 4px solid #E0DFE0;
    margin: 10px;
    transition: all .3s;
}
#accessory .acc_left div:hover{
    border-bottom: 4px solid #00925f;
    transform: translateY(-10px);
}

#accessory .acc_left img{
    width: 250px;
}

/*acc_left下最后一个div里面的img*/
#accessory .acc_left div:last-child img{
    width: 520px;
}

#accessory .acc_all{
    width: 250px;
    height: 250px;
    background-color: #fff;
    border: 4px solid #E0DFE0;
    padding: 20px;
    box-sizing: border-box;
}

/*acc_all里的第一个p*/
#accessory .acc_all p:first-child{
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

#accessory .acc_all li{
    float: left;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
#accessory .acc_all li:hover{
    color: #00925f;
}

#accessory .acc_all .line{
    width: 150px;
    height: 0;
    border-bottom: 1px solid #ccc;
    clear: both;
    margin: 15px auto;
}

/*acc_all里的最后一个p*/
#accessory .acc_all p:last-child{
    text-align: center;
}
#accessory .acc_all p:last-child:hover{
    color: #00925f;
}

#accessory .acc_all span{
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: middle; /*垂直居中 元素不能是行内元素*/
    margin-left: 5px;
    background: url("../img/icons-1.png") no-repeat -178px -1015px;
}

#accessory .acc_rigth{
    width: 540px;
}

#accessory .acc_rigth div{
    float: left;
    border-bottom: 4px solid #E0DFE0;
    margin: 10px;
    transition: all .3s;
}
#accessory .acc_rigth div:hover{
    border-bottom: 4px solid #00925f;
    transform: translateY(-10px);
}

#accessory .acc_rigth img{
    width: 250px;
}

/*acc_rigth里第一个div中的img*/
#accessory .acc_rigth div:first-child img{
    width: 520px;
    height: 250px;
}

#accessory .acc_rigth div:last-child img{
    height: 240px;
}

/*设置搜索OPPO样式*/
#world{
    height: 700px;
    /*clear: both;*/
    background-color: #EBEAEB;
    overflow: hidden;
}

#world .world_top{
    margin: 20px auto;
    text-align: center;
}

#world .world_main{
    width: 1220px;
    margin: 10px auto;
}

#world .world_left{
    width: 800px;
}
#world .world_left div{
    float: left;
    margin: 5px;
}

#world .world_left>div>div{
    border-bottom: 4px solid #E0DFE0;
    transition: all .3s;
}
#world .world_left>div:hover div{
    transform: translateY(-10px);
    border-bottom: 4px solid #00925f;
}

#world .world_right{
    width: 400px;
    height: 570px;
    background-color: #fff;
    margin: 10px;
}

#world .world_right .world_title{
    width: 400px;
    height: 50px;
}

#world .world_right .world_title div{
    width: 200px;
    height: 50px;
    background-color: #E0DFE0;
    text-align: center;
    line-height: 50px;
    float: left;
    border-top: 4px solid #E0DFE0;
}
#world .world_right .world_title div:hover{
    border-top: 4px solid #00925f;
    background-color: #fff;
    color: #00925f;
}

#world .world_right img{
    width: 110px;
    height: 110px;
}

#world .world_right ul li{
    background-color: #E0DFE0;
    margin: 17px 10px;
}

#world .world_right dl{
    width: 380px;
    height: 110px;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

#world .world_right dl dt{
    position: absolute;
    top:0;
    left: 0;
}

#world .world_right dl dd{
    position: absolute;
    top:20px;
    left: 120px;
}

/*配置服务样式*/
#serve {
    height: 100px;
    background-color: #fff;    
}

#serve ul{
    width: 1110px;
    height: 99px;
    margin: 0 auto;
    border-bottom: 1px solid #666;
}

#serve li{
    float: left;
    margin: 0px 10px;
}

#serve dl{
    width: 200px;
    height: 100px;
    position: relative;
}

/*服务部分的5个小图标*/
#serve dt{
    width: 41px;
    height: 41px;
    position: absolute;
    top: 30px;
    left: 10px;
}
#serve .dt1{
    background: url("../img/icons.png") no-repeat 0px -44px;
}
#serve .dt2{
    background: url("../img/icons.png") no-repeat -51px -44px;
}
#serve .dt3{
    background: url("../img/icons.png") no-repeat -101px -44px;
}
#serve .dt4{
    background: url("../img/icons.png") no-repeat -151px -44px;
}
#serve .dt5{
    background: url("../img/icons.png") no-repeat -200px -41px;
}

#serve .dd1{
    position: absolute;
    top: 30px;
    left: 60px;
    font-weight: bold;
}

#serve .dd2{
    position: absolute;
    top: 50px;
    left: 60px;
    color: #ccc;
    font-size: 12px;
}

/*售后服务样式*/
#after_serve{
    height: 200px;
    background-color: #fff;
}

#after_serve ul{
    width: 1110px;
    margin: 0 auto;
    padding-top: 20px;
}

#after_serve ul li{
    width: 185px;
    float: left;
    text-align:center;
    margin: 0 auto;
}

#after_serve ol>li{
    line-height: 30px;
}

#after_serve ol>li:first-child p{
    font-weight: bold;
}

/*售后服务小图标总样式*/
#after_serve span{
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    position: relative;
    
}

/*新浪微博图标样式*/
#after_serve .xlwb{
    width: 20px;
    height: 17px;
    background: url("../img/icons-1.png") no-repeat -1px -881px;
    top: -3px;
}
#after_serve .txwb{
    width: 15px;
    height: 20px;
    background: url("../img/icons-1.png") no-repeat -3px -910px;
    top: -1px;
}
#after_serve .rrw{
    width: 16px;
    height: 16px;
    background: url("../img/icons-1.png") no-repeat -3px -940px;
}
#after_serve .qqkj{
    width: 18px;
    height: 18px;
    background: url("../img/icons-1.png") no-repeat -1px -854px;
    top: -3px;
}

#after_serve .tel{
    width: 30px;
    height: 28px;
    background: url("../img/icons.png") no-repeat 0 -2px;
    transform: scale(0.8);
    margin-right: 20px;
}

#after_serve .telnum{
    color: #00925f;
    font-size:16px;
    font-weight: bold;
}

#after_serve .online{
    width: 29px;
    height: 28px;
    background: url("../img/icons.png") no-repeat -41px -2px;
    transform: scale(0.8);
    margin-right: 20px;
}

#after_serve .onlinefont{
    color: #00925f;
    font-size:20px;
    font-weight: bold;
}

#after_serve a:hover{
    color: #00925f;
}

/*配置底部样式*/
#footer{
    height: 40px;
    background-color: #2D2D2D;
}

#footer p{
    line-height: 40px;
}

#footer p img{
    margin-left: 20px;
}

#footer p span{
    color: #828282;
    margin: 0 430px 0 20px;
}

#footer p a{
    color: #fff;
    margin: 5px;
}
#footer p a:hover{
    color: #00925f;
}

#totop #btn{
    width: 83px;
    height: 77px;
    background: url("../img/totop.png") no-repeat;
    position: fixed;
    top:600px;
    right: 10px;
    transform: scale(0.8);
}

JS部分

// 监听鼠标滑动执行function
$(window).scroll(function(){
    // 获取当前滚动条距离浏览器顶端位置
    var scrollT=document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(scrollT);
    var backTop=$("#world").offset().top - $(window).height()/2;
    // console.log(backTop);
    if( scrollT > backTop){
        // a1元素添加动画移动fade样式
        $(".a1").addClass("animated fadeInLeft show").removeClass("fade");
        $(".a2").addClass("animated fadeInDown show").removeClass("fade");
        $(".a3").addClass("animated fadeInUp show").removeClass("fade");
        $(".a4").addClass("animated fadeInRight show").removeClass("fade");
    }
});