jq+swiper 實現今日頭條App的選項卡效果

-Advertisement-

今日頭條APP頂部點擊可居中導航首頁熱點汽車視頻社會娛發科技生活敲門 ... ...

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>今日頭條APP頂部點擊可居中導航</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #topNav {
            width: 100%;
            overflow: hidden;
            font: 18px;
        }

        #topNav .swiper-slide {
            padding: 0 10px;
            width: auto;
            text-align: center;
        }

        #topNav .swiper-slide span {
            transition: all .3s ease;
            display: block;
        }

        #topNav .active span {
            color: #FF2D2D;
            border-bottom: 3px solid #FF2D2D;
        }

        .tab-list {
            display: none;
        }
    </style>
</head>

<body>
    <div id="topNav" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide active"><span>首頁</span></div>
            <div class="swiper-slide"><span>熱點</span></div>
            <div class="swiper-slide"><span>汽車</span></div>
            <div class="swiper-slide"><span>視頻</span></div>
            <div class="swiper-slide"><span>社會</span></div>
            <div class="swiper-slide"><span>娛發</span></div>
            <div class="swiper-slide"><span>科技</span></div>
            <div class="swiper-slide"><span>生活</span></div>
            <div class="swiper-slide"><span>敲門</span></div>
            <div class="swiper-slide"><span>理科</span></div>
        </div>
    </div>
    <div class="tab-list-box">
        <div class="tab-list" style="display:block;">內容1</div>
        <div class="tab-list">內容2</div>
        <div class="tab-list">內容3</div>
        <div class="tab-list">內容4</div>
        <div class="tab-list">內容5</div>
        <div class="tab-list">內容6</div>
        <div class="tab-list">內容7</div>
        <div class="tab-list">內容8</div>
        <div class="tab-list">內容9</div>
        <div class="tab-list">內容10</div>
    </div>


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
    <script type="text/javascript">
        var mySwiper = new Swiper('#topNav', {
            freeMode: true,
            freeModeMomentumRatio: 0.5,
            slidesPerView: 'auto',
        });

        swiperWidth = mySwiper.container[0].clientWidth
        maxTranslate = mySwiper.maxTranslate();
        maxWidth = -maxTranslate + swiperWidth / 2
        $(".swiper-container").on('touchstart', function (e) {
            e.preventDefault()
        })
        mySwiper.on('tap', function (swiper, e) {
            //  e.preventDefault()
            slide = swiper.slides[swiper.clickedIndex]
            slideLeft = slide.offsetLeft
            slideWidth = slide.clientWidth
            slideCenter = slideLeft + slideWidth / 2
            // 被點擊slide的中心點
            mySwiper.setWrapperTransition(300)
            if (slideCenter < swiperWidth / 2) {
                mySwiper.setWrapperTranslate(0)
            } else if (slideCenter > maxWidth) {
                mySwiper.setWrapperTranslate(maxTranslate)
            } else {
                nowTlanslate = slideCenter - swiperWidth / 2
                mySwiper.setWrapperTranslate(-nowTlanslate)
            }
            $("#topNav .active").removeClass('active');
            $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active');

            $(".tab-list").eq(swiper.clickedIndex).fadeIn().siblings('.tab-list').hide();
        });
    </script>
</body>

</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

HTML連載19-子元素選擇器&交集選擇器

一、子元素選擇器 1.定義：找到指定標簽中所有特定的直接子元素，然後設置屬性 2.格式： 3.釋義：先找到叫做“標簽名稱1”的標簽，然後在這個標簽中查找所有直接子元素名稱叫做“標簽名稱2”的元素：（1）子元素選擇器智慧查找兒子，不會查找孫子，重孫子等等（2）子元素選擇器之間需要用“>”符號相連 ...
js的常用場景效果

表格的隔行變色樣式，checkbox的全選+反選功能實現商品購物車頁面的結算功能。 ...
<dl>標簽--定義列表

[2019.07.03 學習筆記2] 1.定義列表，沒有項目符號，type無法起作用。 2.自定義列表以<dl>標簽開始，自定義列表項始於<dt>標簽，每個自定義列表項的定義始於<dd>。 ...
<ol>標簽--有序列表

[2019.07.03 學習筆記1] 1.定義有序列表,有順序。 2.預設情況下採用數字進行標記，有序列表始於<ol>標簽，每個列表項始於<li>。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <t ...
react diff

傳統diff 通過迴圈遞歸對節點的依次對比，複雜度是O(n3) react diff react對傳統diff進行了優化，將複雜度降為O(n) react基於這幾個前提對diff進行了優化：忽略跨層級操作，因為DOM節點跨層級操作很少。不同類的組件，則會生成不同的樹形結構，相同類的組件，會生成相 ...
Vue學習之webpack中使用vue(十七）

一、包的查找規則： 1、在項目根目錄中找有沒有 node_modules 的文件夾； 2、在 node_modules 中根據包名，找對應的vue 文件夾； 3、在vue 文件夾中，找一個叫做 package.json的包配置文件； 4、在package.json文件中，查找一個main 屬性【m ...
Vue學習之Babel配置(十六）

一、Babel：（官網：https://www.babeljs.cn/docs/） 1、Babel 是一個 JavaScript 編譯器； 2、Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後相容的 JavaScript 語法，以便能夠運行在當前和舊版本 ...
Vue.js 源碼分析(十七) 指令篇 v-if、v-else-if和v-else 指令詳解

v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。 v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續使用：也可以使用 v-else 指令來表示 v-if 的“else 塊”：挺好理解的，就和大多數的語言的if() ...