jQuery四 - 快速開發

原創 Anwfly 2020-12-26 10:00

2.3.5 案例講解-購物車選中商品添加背景

案例效果圖：

思路：

  1. 選中的商品添加背景，不選中移除背景即可
  2. 全選按鈕點擊：如果全選是選中的，則所有的商品添加背景，否則移除背景
  3. 小的複選框點擊： 如果是選中狀態，則當前商品添加背景，否則移除背景
  4. 這個背景，可以通過類名修改，添加類和刪除類

代碼演示：

html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的購物車-品優購</title>
    <meta name="description" content="品優購JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!" />
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,品優購" />
    <!-- 引入facicon.ico網頁圖標 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共樣式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jquery  -->
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 在引入我們自己的js文件 -->
    <script src="js/car.js"></script>
</head>
<body>
    <!-- 頂部快捷導航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品優購歡迎您！ </li>
                    <li>
                        <a href="#">請登錄</a>
                        <a href="#" class="style-red">免費註冊</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的訂單</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品優購</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品優購會員</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企業採購</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">關注品優購</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客戶服務</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">網站導航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 頂部快捷導航end  -->
    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="img/logo.png" alt=""> <b>購物車</b>
            </div>
        </div>
    </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 購物車主要核心區域 -->
            <div class="cart-warp">
                <!-- 頭部全選模塊 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全選
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">單價</div>
                    <div class="t-num">數量</div>
                    <div class="t-sum">小計</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品詳細模塊 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】經典兒童文學彩圖青少版八十天環遊地球中學生語文教學大綱</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;">刪除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000張貼紙】貼紙書 3-6歲 貼畫兒童 貼畫書全套12冊 貼畫 貼紙兒童 汽</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;">刪除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;">刪除</a></div>
                    </div>
                </div>
                <!-- 結算模塊 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全選
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 刪除選中的商品</a>
                        <a href="javascript:;" class="clear-all">清理購物車</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已經選<em>1</em>件商品</div>
                        <div class="price-sum">總價： <em>￥12.60</em></div>
                        <div class="btn-area">去結算</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>幫助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品優購客戶端</p>
                    </dd>
                </dl>
            </div>
            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    關於我們 | 聯繫我們 | 聯繫客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 | 品優購社區 | 品優購公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br> 京ICP備08001421號京公網安備110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>
</html>

css：

base.css

/*清除元素默認的內外邊距  */
* {
    margin: 0;
    padding: 0
}
/*讓所有斜體 不傾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小點*/
li {
    list-style: none;
}
/*圖片沒有邊框   去掉圖片底側的空白縫隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*讓button 按鈕 變成小手*/
button {
    cursor: pointer;
}
/*取消鏈接的下劃線*/
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #e33333;
}
button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /*取消輪廓線 藍色的*/
    outline: none;
}
body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}
.hide,
.none {
    display: none;
}
/*清除浮動*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
.clearfix {
    *zoom: 1
}

common.css

/* common.css */
/*公共樣式*/
.fl {
    float: left;
}
.fr {
    float: right;
}
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?7kkyc2');
    src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fr .icomoon {
    font-family: 'icomoon';
    font-size: 16px;
    line-height: 26px;
}
/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
}
.style-red {
    color: #c81623;
}
.spacer {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 12px 0;
}
/*頂部快捷導航*/
.shortcut {
    height: 31px;
    background-color: #f1f1f1;
    line-height: 31px;
}
.shortcut li {
    float: left;
}
/*header區域*/
.header {
    position: relative;
    height: 105px;
}
.logo {
    position: absolute;
    top: 25px;
    left: 0;
    width: 175px;
    height: 56px;
}
.logo a {
    display: block;
    /*overflow: hidden;*/
    width: 175px;
    height: 56px;
    background: url(../img/logo.png) no-repeat;
    /*text-indent: -999px;*/
    font-size: 0;
}
.search {
    position: absolute;
    top: 25px;
    left: 348px;
}
.text {
    float: left;
    width: 445px;
    height: 32px;
    border: 2px solid #b1191a;
    padding-left: 10px;
    color: #ccc;
}
.btn {
    float: left;
    width: 82px;
    height: 36px;
    background-color: #b1191a;
    border: 0;
    font-size: 16px;
    color: #fff;
}
.hotwrods {
    position: absolute;
    top: 65px;
    left: 348px;
}
.hotwrods a {
    margin: 0 10px;
}
.shopcar {
    position: absolute;
    top: 25px;
    right: 64px;
    width: 138px;
    height: 34px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    line-height: 34px;
    text-align: center;
}
.car {
    font-family: 'icomoon';
    color: #da5555;
}
.arrow {
    font-family: 'icomoon';
    margin-left: 5px;
}
.count {
    position: absolute;
    top: -5px;
    /*應該是左側對齊 文字才能往右走顯示*/
    left: 100px;
    background-color: #e60012;
    height: 14px;
    padding: 0 3px;
    line-height: 14px;
    color: #fff;
    /*border-radius: 左上角 右上角  右下角  左下角;*/
    border-radius: 7px 7px 7px 0;
}
/*nav start*/
.nav {
    height: 45px;
    border-bottom: 2px solid #b1191a;
}
.dropdown {
    width: 209px;
    height: 45px;
}
.dropdown .dt {
    height: 100%;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}
.dropdown .dd {
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}
.menu_item:hover {
    background-color: #fff;
}
/*鼠標經過li 裏面的 a變顏色*/
.menu_item:hover a {
    color: #c81623;
}
.menu_item {
    height: 31px;
    line-height: 31px;
    margin-left: 1px;
    padding: 0 10px;
    transition: all .5s;
}
.menu_item:hover {
    padding-left: 20px;
}
.menu_item a {
    font-size: 14px;
    color: #fff;
}
.menu_item i {
    float: right;
    font-family: 'icomoon';
    font-size: 18px;
    color: #fff;
}
.navitems {
    margin-left: 10px;
}
.navitems li {
    float: left;
}
.navitems li a {
    display: block;
    height: 45px;
    padding: 0 25px;
    line-height: 45px;
    font-size: 16px;
}
/*footer 部分*/
.footer {
    height: 386px;
    background-color: #f5f5f5;
    padding-top: 30px;
}
.mod_service {
    height: 79px;
    border-bottom: 1px solid #ccc;
}
.mod_service li {
    float: left;
    width: 240px;
    height: 79px;
}
.mod-service-icon {
    /*浮動的盒子 可以直接給大小的 不需要轉換*/
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 35px;
    background: url(../img/icons.png) no-repeat;
}
.mod_service_zheng {
    background-position: -253px -3px;
}
.mod_service_tit {
    float: left;
    margin-left: 5px;
}
.mod_service_tit h5 {
    margin: 5px 0;
}
.mod_service_kuai {
    background-position: -255px -54px;
}
.mod_service_bao {
    background-position: -257px -105px;
}
.mod_help {
    height: 187px;
    border-bottom: 1px solid #ccc;
}
.mod_help_item {
    float: left;
    width: 150px;
    padding: 20px 0 0 50px;
}
.mod_help_item dt {
    height: 25px;
    font-size: 16px;
}
.mod_help_item dd {
    height: 22px;
}
.mod_help_app dt,
.mod_help_app p {
    padding-left: 15px;
}
.mod_help_app img {
    margin: 7px 0;
}
.mod_copyright {
    text-align: center;
}
.mod_copyright_links {
    margin: 20px 0 15px 0;
}
.mod_copyright_info {
    line-height: 18px;
}

cart.css

.car-header {
    padding: 20px 0;
}
.car-logo img {
    vertical-align: middle;
}
.car-logo b {
    font-size: 20px;
    margin-top: 20px;
    margin-left: 10px;
}
.cart-filter-bar {
    font-size: 16px;
    color: #E2231A;
    font-weight: 700;
}
.cart-filter-bar em {
    padding: 5px;
    border-bottom: 1px solid #E2231A;
}
.cart-thead {
    height: 32px;
    line-height: 32px;
    margin: 5px 0 10px;
    padding: 5px 0;
    background: #f3f3f3;
    border: 1px solid #e9e9e9;
    border-top: 0;
    position: relative;
}
.cart-thead>div,
.cart-item>div {
    float: left;
}
.t-checkbox,
.p-checkbox {
    height: 18px;
    line-height: 18px;
    padding-top: 7px;
    width: 122px;
    padding-left: 11px;
}
.t-goods {
    width: 400px;
}
.t-price {
    width: 120px;
    padding-right: 40px;
    text-align: right;
}
.t-num {
    width: 150px;
    text-align: center;
}
.t-sum {
    width: 100px;
    text-align: right;
}
.t-action {
    width: 130px;
    text-align: right;
}
.cart-item {
    height: 160px;
    border-style: solid;
    border-width: 2px 1px 1px;
    border-color: #aaa #f1f1f1 #f1f1f1;
    background: #fff;
    padding-top: 14px;
    margin: 15px 0;
}
.check-cart-item {
    background: #fff4e8;
}
.p-checkbox {
    width: 50px;
}
.p-goods {
    margin-top: 8px;
    width: 565px;
}
.p-img {
    float: left;
    border: 1px solid #ccc;
    padding: 5px;
}
.p-msg {
    float: left;
    width: 210px;
    margin: 0 10px;
}
.p-price {
    width: 110px;
}
.quantity-form {
    width: 80px;
    height: 22px;
}
.p-num {
    width: 170px;
}
.decrement,
.increment {
    float: left;
    border: 1px solid #cacbcb;
    height: 18px;
    line-height: 18px;
    padding: 1px 0;
    width: 16px;
    text-align: center;
    color: #666;
    margin: 0;
    background: #fff;
    margin-left: -1px;
}
.itxt {
    float: left;
    border: 1px solid #cacbcb;
    width: 42px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 1px;
    margin: 0;
    margin-left: -1px;
    font-size: 12px;
    font-family: verdana;
    color: #333;
    -webkit-appearance: none;
}
.p-sum {
    font-weight: 700;
    width: 145px;
}
/* 結算模塊 */
.cart-floatbar {
    height: 50px;
    border: 1px solid #f0f0f0;
    background: #fff;
    position: relative;
    margin-bottom: 50px;
    line-height: 50px;
}
.select-all {
    float: left;
    height: 18px;
    line-height: 18px;
    padding: 16px 0 16px 9px;
    white-space: nowrap;
}
.select-all input {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
}
.operation {
    float: left;
    width: 200px;
    margin-left: 40px;
}
.clear-all {
    font-weight: 700;
    margin: 0 20px;
}
.toolbar-right {
    float: right;
}
.amount-sum {
    float: left;
}
.amount-sum em {
    font-weight: 700;
    color: #E2231A;
    padding: 0 3px;
}
.price-sum {
    float: left;
    margin: 0 15px;
}
.price-sum em {
    font-size: 16px;
    color: #E2231A;
    font-weight: 700;
}
.btn-area {
    font-weight: 700;
    width: 94px;
    height: 52px;
    line-height: 52px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    background: #e54346;
    overflow: hidden;
}

js：

$(function() {
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 讓所有的商品添加 check-cart-item 類名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
})

2.4 jQuery尺寸位置操作

jQuery中分別爲我們提供了兩套快速獲取和設置元素尺寸和位置的API，方便易用，內容如下。

2.4.1 jQuery尺寸操作

jQuery 尺寸操作包括元素寬高的獲取和設置，且不一樣的API對應不一樣的盒子模型。

語法：

語法 用法
width() / height() 取得匹配元素寬度和高度值 只算width / height
innerWidth() / innerHeight() 取得匹配元素寬度和高度值 包含 padding
outerWidth() / outerHeight() 取得匹配元素寬度和高度值 包含 padding、border
outerWidth(true) / outerHeight(true) 取得匹配元素寬度和高度值 包含padding、border、margin

說明：*

  1. 以上參數爲空，則是獲取相應值，返回的是number類型
  2. 如果參數爲數字，則是修改相應的值
  3. 參數可以不必寫單位

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height() 獲取設置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  獲取設置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  獲取設置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 獲取設置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>
</html>

2.4.2 jQuery位置操作

jQuery的位置操作主要有三個： offset()、position()、scrollTop()/scrollLeft() , 具體介紹如下:

語法：

  1. offset()設置或獲取元素偏移

    • offset()方法設置或返回被選元素相對於文檔的偏移座標，跟父級沒有關係
    • 該方法有2個屬性left、top。offset().top用於獲取距離文檔頂部的距離，offset().left用於獲取距離文檔左側的距離
    • 可以設置元素的偏移：offsete({ left: 30, top: 10 })

  2. position()獲取元素偏移

    • position()方法用於返回被選元素相對於帶有定位的父級偏移座標，如果父級都沒有定位，則已文檔爲準
    • 該方法有2個屬性left、top。position().top用於獲取距離定位父級頂部的距離，position().left用於獲取距離定位父級左側的距離
    • 該方法只能獲取

  3. scrollTop() / scrollLeft() 設置或獲取元素被捲去的頭部和左側

    • scrollTop()方法設置或返回被選元素被捲去的頭部
    • 不跟參數是獲取，參數爲不帶單位的數字則是設置被捲去的頭部

代碼演示：

<!--offset 和 position-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            // 1. 獲取設置距離文檔的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
            // 2. 獲取距離帶有定位父級位置（偏移） position   如果沒有帶有定位的父級，則以文檔爲準
            // 這個方法只能獲取不能設置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
        })
    </script>
</body>
</html>

2.4.3 案例講解-帶有動畫的返回頂部

案例效果圖：

(media/gotop.gif)

思路：

  1. 獲取到盒子距離頁面頂部的距離
  2. 監聽頁面的滾動事件
  3. 當滾動的距離大於盒子距離頁面頂部的距離時，顯示返回頂部按鈕，否則不顯示
  4. 點擊返回頂部按鈕把html和body的scrollTop置爲0

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
    <div class="back">返回頂部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            // 被捲去的頭部 scrollTop()  / 被捲去的左側 scrollLeft()
            // 頁面滾動事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回頂部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文檔而是 html和body元素做動畫
            })
        })
    </script>
</body>
</html>

2.4.4 案例講解-嚴選商城電梯導航

案例效果圖：

(media/樓梯.gif)

思路：

  1. 當我們滾動到 今日推薦 模塊，就讓電梯導航顯示出來
  2. 點擊電梯導航頁面可以滾動到相應內容區域
  3. 核心算法：因爲電梯導航模塊和內容區模塊一一對應的
  4. 當我們點擊電梯導航某個小模塊，就可以拿到當前小模塊的索引號
  5. 就可以把animate要移動的距離求出來：當前索引號內容區模塊它的offset().top
  6. 然後執行動畫即可
  7. 當我們點擊電梯導航某個小li， 當前小li 添加current類，兄弟移除類名
  8. 當我們頁面滾動到內容區域某個模塊， 左側電梯導航，相對應的小li模塊，也會添加current類， 兄弟移除current類
  9. 觸發的事件是頁面滾動，因此這個功能要寫到頁面滾動事件裏面
  10. 需要用到each，遍歷內容區域大模塊。 each裏面能拿到內容區域每一個模塊元素和索引號
  11. 判斷的條件： 被捲去的頭部 大於等於 內容區域裏面每個模塊的offset().top
  12. 就利用這個索引號找到相應的電梯導航小li添加類

案例目錄結構：

(media/電梯導航結構.png)

代碼演示：

html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>品優購-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物！</title>
    <meta name="description" content="品優購JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!" />
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,品優購" />
    <!-- 引入facicon.ico網頁圖標 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共樣式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入 首頁的css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <!-- 頂部快捷導航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品優購歡迎您！ </li>
                    <li>
                        <a href="#">請登錄</a>
                        <a href="#" class="style-red">免費註冊</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的訂單</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品優購</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品優購會員</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企業採購</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">關注品優購</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客戶服務</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">網站導航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 頂部快捷導航end  -->
    <!-- header製作 -->
    <div class="header w">
        <!-- logo -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品優購">品優購</a>
            </h1>
        </div>
        <!-- search -->
        <div class="search">
            <input type="text" class="text" value="請搜索內容...">
            <button class="btn">搜索</button>
        </div>
        <!-- hotwrods -->
        <div class="hotwrods">
            <a href="#" class="style-red">優惠購首發</a>
            <a href="#">億元優惠</a>
            <a href="#">9.9元團購</a>
            <a href="#">美滿99減30</a>
            <a href="#">辦公用品</a>
            <a href="#">電腦</a>
            <a href="#">通信</a>
        </div>
        <div class="shopcar">
            <i class="car"> </i>我的購物車 <i class="arrow">  </i>
            <i class="count">80</i>
        </div>
    </div>
    <!-- header 結束 -->
    <!-- nav start -->
    <div class="nav">
        <div class="w">
            <div class="dropdown fl">
                <div class="dt"> 全部商品分類 </div>
                <div class="dd">
                    <ul>
                        <li class="menu_item"><a href="#">家用電器</a> <i>  </i> </li>
                        <li class="menu_item">
                            <a href="list.html">手機</a> 、
                            <a href="#">數碼</a> 、
                            <a href="#">通信</a>
                            <i>  </i>
                        </li>
                        <li class="menu_item"><a href="#">電腦、辦公</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">家居、傢俱、家裝、廚具</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">男裝、女裝、童裝、內衣</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">個戶化妝、清潔用品、寵物</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">鞋靴、箱包、珠寶、奢侈品</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">運動戶外、鐘錶</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">汽車、汽車用品</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">母嬰、玩具樂器</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">食品、酒類、生鮮、特產</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">醫藥保健</a> <i>  </i> </li>
                        <li class="menu_item"><a href="#">圖書、音像、電子書</a> <i> </i> </li>
                        <li class="menu_item"><a href="#">彩票、旅行、充值、票務</a> <i> </i> </li>
                        <li class="menu_item"><a href="#">理財、衆籌、白條、保險</a> <i>  </i> </li>
                    </ul>
                </div>
            </div>
            <!-- 右側導航 -->
            <div class="navitems fl">
                <ul>
                    <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="#">拍賣</a></li>
                    <li><a href="#">有趣</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- nav end  -->
    <!-- main 模塊 -->
    <div class="w">
        <div class="main">
            <div class="focus fl">
                <!-- 左側按鈕 -->
                <a href="javascript:;" class="arrow-l">
                    &lt;
                 </a>
                <!-- 右側按鈕 -->
                <a href="javascript:;" class="arrow-r">  </a>
                <!-- 核心的滾動區域 -->
                <ul>
                    <li>
                        <a href="#"><img src="upload/focus.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus3.jpg" alt=""></a>
                    </li>
                </ul>
                <!-- 小圓圈 -->
                <ol class="circle"></ol>
            </div>
            <div class="newsflash fr">
                <div class="news">
                    <div class="news-hd">
                        品優購快報
                        <a href="#">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#">【特惠】爆款耳機5折秒！</a></li>
                            <li><a href="#">【特惠】母親節，健康好禮低至5折！</a></li>
                            <li><a href="#">【特惠】爆款耳機5折秒！</a></li>
                            <li><a href="#">【特惠】9.9元洗100張照片！</a></li>
                            <li><a href="#">【特惠】長虹智能空調立省1000</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifeservice">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_huafei"></i>
                                <p>話費</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                            <span class="hot"></span>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>機票</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 推薦服務模塊 start -->
    <div class="recommend w">
        <div class="recom-hd fl">
            <img src="img/clock.png" alt="">
            <h3>今日推薦</h3>
        </div>
        <div class="recom-bd fl">
            <ul>
                <li>
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li class="last">
                    <a href="#">
                        <img src="upload/pic.jpg" alt="">
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!-- 推薦服務模塊 end -->
    <!-- 樓層區 start -->
    <div class="floor">
        <div class="jiadian w">
            <div class="box-hd">
                <h3>家用電器</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</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="#">空氣/淨水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣淨化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="shouji w">
            <div class="box-hd">
                <h3>手機通訊</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</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="#">空氣/淨水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣淨化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="diannao w">
            <div class="box-hd">
                <h3>電腦辦公</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</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="#">空氣/淨水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣淨化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="jiaju w">
            <div class="box-hd">
                <h3>精品傢俱</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">熱門</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="#">空氣/淨水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端電器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">節能補貼</a>
                            </li>
                            <li>
                                <a href="#">4K電視</a>
                            </li>
                            <li>
                                <a href="#">空氣淨化器</a>
                            </li>
                            <li>
                                <a href="#">IH電飯煲</a>
                            </li>
                            <li>
                                <a href="#">滾筒洗衣機</a>
                            </li>
                            <li>
                                <a href="#">電熱水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 樓層區 end -->
    <!-- 固定電梯導航 -->
    <div class="fixedtool">
        <ul>
            <li class="current">家用電器</li>
            <li>手機通訊</li>
            <li>電腦辦公</li>
            <li>精品傢俱</li>
        </ul>
    </div>
    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯繫客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>幫助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品優購客戶端</p>
                    </dd>
                </dl>
            </div>
            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    關於我們 | 聯繫我們 | 聯繫客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 | 品優購社區 | 品優購公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br> 京ICP備08001421號京公網安備110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>
</html>

css：

base.css：

/*清除元素默認的內外邊距  */
* {
    margin: 0;
    padding: 0
}
/*讓所有斜體 不傾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小點*/
li {
    list-style: none;
}
/*圖片沒有邊框   去掉圖片底側的空白縫隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*讓button 按鈕 變成小手*/
button {
    cursor: pointer;
}
/*取消鏈接的下劃線*/
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #e33333;
}
button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /*取消輪廓線 藍色的*/
    outline: none;
}
body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}
.hide,
.none {
    display: none;
}
/*清除浮動*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
.clearfix {
    *zoom: 1
}

common.css：

/*公共樣式*/
.fl {
    float: left;
}
.fr {
    float: right;
}
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fr .icomoon {
    font-family: 'icomoon';
    font-size: 16px;
    line-height: 26px;
}
/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
}
.style-red {
    color: #c81623;
}
.spacer {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 12px 0;
}
/*頂部快捷導航*/
.shortcut {
    height: 31px;
    background-color: #f1f1f1;
    line-height: 31px;
}
.shortcut li {
    float: left;
}
/*header區域*/
.header {
    position: relative;
    height: 105px;
}
.logo {
    position: absolute;
    top: 25px;
    left: 0;
    width: 175px;
    height: 56px;
}
.logo a {
    display: block;
    /*overflow: hidden;*/
    width: 175px;
    height: 56px;
    background: url(../img/logo.png) no-repeat;
    /*text-indent: -999px;*/
    font-size: 0;
}
.search {
    position: absolute;
    top: 25px;
    left: 348px;
}
.text {
    float: left;
    width: 445px;
    height: 32px;
    border: 2px solid #b1191a;
    padding-left: 10px;
    color: #ccc;
}
.btn {
    float: left;
    width: 82px;
    height: 36px;
    background-color: #b1191a;
    border: 0;
    font-size: 16px;
    color: #fff;
}
.hotwrods {
    position: absolute;
    top: 65px;
    left: 348px;
}
.hotwrods a {
    margin: 0 10px;
}
.shopcar {
    position: absolute;
    top:25px;
    right: 64px;
    width: 138px;
    height: 34px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    line-height: 34px;
    text-align: center;
}
.car {
    font-family: 'icomoon';
    color: #da5555;
}
.arrow {
    font-family: 'icomoon';
    margin-left: 5px;
}
.count {
    position: absolute;
    top: -5px;
    /*應該是左側對齊 文字才能往右走顯示*/
    left: 100px;
    background-color: #e60012;
    height: 14px;
    padding: 0 3px;
    line-height: 14px;
    color: #fff;
    /*border-radius: 左上角 右上角  右下角  左下角;*/
    border-radius: 7px 7px 7px 0;
}
/*nav start*/
.nav {
    height: 45px;
    border-bottom: 2px solid #b1191a;
}
.dropdown {
    width: 209px;
    height: 45px;
}
.dropdown .dt {
    height: 100%;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}
.dropdown .dd {
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
} 
.menu_item:hover {
    background-color: #fff;
}
/*鼠標經過li 裏面的 a變顏色*/
.menu_item:hover a {
    color: #c81623;
}
.menu_item {
    height: 31px;
    line-height: 31px;
    margin-left: 1px;
    padding: 0 10px;
    transition: all .5s;
}
.menu_item:hover {
    padding-left: 20px;
}
.menu_item a {
    font-size: 14px;
    color: #fff;
}
.menu_item i {
    float: right;
    font-family: 'icomoon';
    font-size: 18px;
    color: #fff;
}
.navitems {
    margin-left: 10px;
}
.navitems li {
    float: left;
}
.navitems li a {
    display: block;
    height: 45px;
    padding: 0 25px;
    line-height: 45px;
    font-size: 16px;
}
/*footer 部分*/
.footer {
    height: 386px;
    background-color: #f5f5f5;
    padding-top: 30px;
}
.mod_service {
    height: 79px;
    border-bottom: 1px solid #ccc;
}
.mod_service li {
    float: left;
    width: 240px;
    height: 79px;

}
.mod-service-icon {
    /*浮動的盒子 可以直接給大小的 不需要轉換*/
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 35px;
    background: url(../img/icons.png) no-repeat;
}
.mod_service_zheng {
    background-position: -253px -3px;   
}
.mod_service_tit {
    float: left;
    margin-left: 5px;
}
.mod_service_tit h5 {
    margin: 5px 0;
}
.mod_service_kuai {
    background-position: -255px -54px;
}
.mod_service_bao {
    background-position: -257px -105px;
}
.mod_help {
    height: 187px;
    border-bottom: 1px solid #ccc;
}
.mod_help_item {
    float: left;
    width: 150px;
    padding: 20px 0 0 50px;
}
.mod_help_item dt {
    height: 25px;
    font-size: 16px;
}
.mod_help_item dd {
    height: 22px;
}
.mod_help_app dt,
.mod_help_app p {
    padding-left: 15px;
}
.mod_help_app img {
    margin: 7px 0;
}
.mod_copyright {
    text-align: center;
}
.mod_copyright_links {
    margin: 20px 0 15px 0;
}
.mod_copyright_info {
    line-height: 18px;
}

index.css：

/*這個文件裏面放的是 首頁的樣式*/
.main {
    width: 980px;
    height: 455px;
    margin-left: 219px;
    margin-top: 10px;
}
.focus {
    position: relative;
    width: 721px;
    height: 455px;
    background-color: purple;
    overflow: hidden;
}
.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}
.focus ul li {
    float: left;
}
.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
}
.arrow-r {
    right: 0;
}
.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠標經過顯示小手*/
    cursor: pointer;
}
.current {
    background-color: #fff;
}
.newsflash {
    width: 250px;
    height: 455px;
}
.news {
    height: 163px;
    border: 1px solid #ccc;
}
.news-hd {
    height: 32px;
    /*dotted 點線  dashed  虛線*/
    border-bottom: 1px dotted #ccc;
    padding: 0 15px;
    font-size: 14px;
    line-height: 32px;
}
.news-hd a {
    float: right;
    font-size: 12px;
    font-family: 'icomoon';
}
.news-bd {
    padding: 10px 0 0 15px;
}
.news-bd li {
    height: 23px;
}
.lifeservice {
    overflow: hidden;
    height: 208px;
    border: 1px solid #ccc;
    border-top: none;
}
.lifeservice ul {
    width: 252px;
}
.lifeservice li {
    position: relative;
    float: left;
    width: 62px;
    height: 70px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.lifeservice li a {
    display: block;
    /* overflow: hidden; 解決i 引起的 外邊距塌陷合併的問題*/
    overflow: hidden;
    height: 100%;
}
.lifeservice li p {
    text-align: center;
}
.hot {
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 15px;
    background: url(../img/jian.jpg) no-repeat;
}
.service_ico {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/icons.png) no-repeat;
    margin: 10px auto;
}
.service_ico_huafei {
    background-position: -17px -16px;
}
.service_ico_feiji {
    width: 26px;
    background-position: -78px -16px;
}
.bargain {
    height: 75px;
    margin-top: 5px;
}
/*推薦模塊*/
.recommend {
    height: 163px;
    margin-top: 10px;
}
.recom-hd {
    width: 200px;
    height: 163px;
    background-color: #5c5251;
    text-align: center;
}
.recom-hd img {
    margin: 30px 0 10px 0;
}
.recom-hd h3 {
    font-size: 18px;
    color: #fff;
    font-weight: normal;
}
.recom-bd {
    width: 1000px;
    height: 163px;
    background-color: #ebebeb;
}
.recom-bd li {
    float: left;
    width: 249px;
    height: 145px;
    border-right: 1px solid #ccc;
    margin-top: 10px;
}
.recom-bd .last {
    border-right: 0;
}
/*floor 樓層區*/
.box-hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
    margin-top: 25px;
}
.box-hd h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
}
.tab-list {
    float: right;
    line-height: 30px;
}
.tab-list li {
    float: left;
}
.tab-list li a {
    margin: 0 15px;
}
.box-bd {
    height: 360px;
}
.w209 {
    width: 209px;
    background-color: #f9f9f9;
}
.w329 {
    width: 329px;
}
.w219 {
    width: 219px;
    border-right: 1px solid #ccc;
}
.w220 {
    width: 220px;
    border-right: 1px solid #ccc;
}
.tab-con li {
    float: left;
    height: 360px;
}
.tab-con-item {
    border-bottom: 1px solid #ccc;
}
.tab-con-list {
    overflow: hidden;
    margin-bottom: 15px;
}
.tab-con-list li {
    width: 86px;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #ccc;
    margin-left: 10px;
    text-align: center;
}
.box-bd li {
    overflow: hidden;
}
.box-bd img {
    /*過渡寫到本身上， 誰做動畫，給誰加*/
    transition: all .2s;
}
/*我們鼠標經過圖片 往右走 8px*/
.box-bd img:hover {
    margin-left: 8px;
}
/*電梯導航*/
.fixedtool {
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -676px;
    width: 66px;
    background-color: #fff;
    display: none;
}
.fixedtool li {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}
.fixedtool .current {
    background-color: #c81623;
    color: #fff;
}

index.js：

$(function() {
    // 當我們點擊了小li 此時不需要執行 頁面滾動事件裏面的 li 的背景選擇 添加 current
    // 節流閥  互斥鎖 
    var flag = true;
    // 1.顯示隱藏電梯導航
    var toolTop = $(".recommend").offset().top;
    toggleTool();
    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
    $(window).scroll(function() {
        toggleTool();
        // 3. 頁面滾動到某個內容區域，左側電梯導航小li相應添加和刪除current類名
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }
    });
    // 2. 點擊電梯導航頁面可以滾動到相應內容區域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 當我們每次點擊小li 就需要計算出頁面要去往的位置 
        // 選出對應索引號的內容區的盒子 計算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 頁面動畫滾動效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 點擊之後，讓當前的小li 添加current 類名 ，姐妹移除current類名
        $(this).addClass("current").siblings().removeClass();
    })
})
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

即刻放大鏡。跟隨鼠標，屏幕任意位置放大

特徵：支持熱鍵放大位置跟隨縮放比例隨時調整高亮放大鏡區域記住上一次設定     操作說明：啓動程序，托盤顯示圖標Ctrl+Q熱鍵開啓放大鏡放大位置跟隨鼠標移動鼠標滾輪調整縮放比例   常見問題：視頻播放的時候能否實時放大不支持。放大期間，

5imetro 2024-04-19 14:35:10

GPG4win 加解密使用筆記

簡介： Gpg4win是一套文件或email加密解密的安全方案。 Gpg4win - a secure solution for file and email encryption. Gpg4win (GNU Privacy Guard f

zdleek 2024-04-19 14:33:30

視頻講解如何構建surging微服務調用

       surging 是一款優秀的微服務引擎，包括了社區版，標準版，異構版，平臺版本來解決公司的業務場景需求，如果你是初學者，或者是技術狂熱者，社區版完全可以符合你們的要求來學習或者構建起微服務體系的引擎框架，如果你沒信心去把控構建

fanly11 2024-04-19 14:32:59

【面試準備】項目經驗——接口自動化項目

Java junit 項目的接口就很簡單，只支持本地運行，結構就是這樣了。 REST_TEMPLATES    

金大鑫要堅持 2024-04-19 14:29:29

【面試準備】【SQL】數據庫有哪些約束？

數據庫中的約束（constraints）是用來確保數據庫中數據的準確性和可靠性的一種規則。以下是一些常見的數據庫約束： PRIMARY KEY（主鍵）：確保列的值是唯一的，並且不能爲NULL。 FOREIGN KEY（外鍵）：用於在

金大鑫要堅持 2024-04-19 14:29:29

【面試準備】跨域問題解決方法

跨域是什麼 瀏覽器對於javascript的同源策略的限制，是一種安全策略 舉例：用戶登陸某個網站後，服務器在客戶端寫了一些cookie，如果cookie被其他網站讀取，那麼隱私信息就會泄漏，包含用戶的登錄狀態等。 跨域情況說明： 域名不

金大鑫要堅持 2024-04-19 14:29:29

遞歸處理複製變量目錄按原路徑複製到新目錄的腳本

  腳本如下:   1 # coding: utf-8 2 3 """ 4 該腳本主要做把源目錄下所有文件，照搬原路徑基礎上覆制文件 5 """ 6 7 import os 8 # import shutil

fengzao 2024-04-19 14:26:19

我的個人博客上線開源啦，歡迎圍觀！

博客地址：https://yanyunfeng.com 其實很早就有開發一個自己個人博客的想法，但是一直沒有付諸行動，如今大家能看到這篇文章，說明我的博客終於是上線啦，撒花～～ 在開發這個博客之前，我都是在各大平臺上寫些東西，但是吧，平臺規

imilar 2024-04-19 14:23:08

golang開發 深入理解 context

context的歷史 context包在Go 1.7版本正式加入Go標準庫。在加入之前我們看看Go團隊核心成員Sameer Ajmani在2014年發表的一篇關於context介紹博客，地址：https://go.dev/blog/cont

飛翔碼農 2024-04-19 14:22:38

南方公園完整破碎

被魅惑了,就用自己人打一下自己即可解除. 手機女俠大招和減防攻擊很好用.

張博的博客 2024-04-19 14:20:58

BGE M3-Embedding 模型介紹

BGE M3-Embedding來自BAAI和中國科學技術大學，是BAAI開源的模型。相關論文在https://arxiv.org/abs/2402.03216，論文提出了一種新的embedding模型，稱爲M3-Embedding，它在多

JadePeng 2024-04-19 14:20:18

【百川大模型】RediSearch在python中的應用場景

[本文出自天外歸雲的博客園] RediSearch是一個非常強大的全文搜索引擎，它可以與Python一起使用，爲你的應用程序提供快速的搜索能力。以下是一些使用RediSearch的場景示例： 場景一：商品搜索 假設你正在開發一個電子商務網站

天外歸雲 2024-04-19 14:16:58

CXF WebService wsdl2java

下載 apache-cxf-3.3.1 並解壓 到bin 目錄下，輸入生成命令 wsdl2java -encoding utf-8 -d D:\Software\Webservice\ws http://XXX.XXX.XXX.XXX:X

阿 軍 2024-04-19 14:15:57

keycloak~jwt的rs256簽名的驗證方式

接口地址 keycloak開放接口地址：/auth/realms/fabao/.well-known/openid-configuration rsa算法相關術語 RSA算法是一種非對稱加密算法，其安全性基於大整數分解的困難性。在RS

張佔嶺 2024-04-19 14:13:27

通過Java修改consul配置（保留註釋、保留縮進）

          　　直接上代碼了，找了很久也沒找到保留註釋的三方包，snakeyaml 的縮進一直也有問題，就自己寫了個正則方式的 　　consul也沒有相關接口，只接受整個的 　　傳key和value，替換相應value值， 　　大佬

唯心、tt 2024-04-19 14:08:07