js實現左右滑動的導航菜單，仿今日頭條頂部菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css" rel="stylesheet">
    <style>
        body{padding: 0;margin: 0}
        .swiper-slide{width: auto!important;}
        .topmenu{height: 35px;background-color: white;border-bottom: 1px solid #CCCCCC;padding: 0 10px;line-height: 35px;font-family: "微軟雅黑"}
    </style>
</head>
<body id="mall">
<!-- Swiper -->
<div class="topmenu">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <span class="swiper-slide">阿斯蒂芬</span>
            <span class="swiper-slide">時的風格</span>
            <span class="swiper-slide">啥都搞好對方更好的</span>
            <span class="swiper-slide">是的</span>
            <span class="swiper-slide">時的風格</span>
            <span class="swiper-slide">撒地方</span>
            <span class="swiper-slide">為阿斯蒂芬</span>
            <span class="swiper-slide">撒地方</span>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.min.js"></script>
<script>
    $(function () {
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 20,
            slidesPerView:'auto',
            freeMode: true
        });
    })
</script>
</body>
</html>

復制代碼即可運行！

注意：請切換手機端查看

運行效果：

本文鏈接：https://blog.csdn.net/ziwoods/article/details/78580194

智能推薦

仿今日頭條的夜間模式

前段時間查資料，為自己的新聞項目做過一個仿今日頭條的夜間模式效果，經過一段時間的測試，發現現在效果的狀態已經和今日頭條的相差無幾。雖然不知道方式是不是一樣，但效果至少出來了。下面把自己的核心代碼和方式貼出來，希望能給更多的人提供幫助和啟發。首先上一下效果圖上兩張圖是做后的效果，總體原理是在Sharepreference中存儲isnight是否是夜間模式的狀態，在每一次改變ToggleButto...

TabLayout+Viewpager+Fragment實現類似今日頭條頂部導航欄

很多文章類的app頁面更多的是頂部導航欄滾動，以便加載更多的數據，類似與今日頭條圖1，圖2是咱要做的玩Android公眾號頁簽 &nb...

Android仿今日頭條圖片滑動退出效果

逛CSDN的時候，看到幾篇寫仿今日頭條圖片滑動退出效果的文章，閑著無聊便想著也給自己項目加上，實現的思路有很多種，本著就近原則選了一篇與自己思路相近的文章結合自己的實踐總結一下。下載原文的Demo用了一下，發現了幾點可以優化的地方： 1、圖片縮放上不太好使，放大縮小的同時就給你滑出去了 2、沒有暴露接口給用戶實現更多的透明度變換效果，比如我不僅想要背景透明度在手指移動的時候發生變化，還有文字或者...

仿寫《今日頭條》的tag選擇頁面

在《今日頭條》中，該頁面是用來選擇自己感興趣的頻道標簽從而改變segment的。標簽功能應用的需求現在也比較多，主要使用collectionview中item可以移動的方法和思路來寫這樣的頁面。關鍵點在collectionview上添加的長按手勢手勢狀態的變化和操作手勢開始移動的時候調用此方法，可以獲取相應的datasource方法設置特殊的indexpath 能...

Android仿今日頭條的開源項目

起因看到眾多大神紛紛有了自己的開源項目，于是自己琢磨著也想做一個開源項目來學習下，因為每次無聊必刷的app就是今日頭條，評論簡直比內容都精彩，所以我打算仿今日頭條來練練手，期間也曾放棄過，也遇到很多坑，拿出來跟大家分享一下，喜歡的記得給個Star，當作是給我的鼓勵和動力吧。源碼鏈接 https://github.com/yewei02538/TodayNews 無圖言屌第三方庫 ...

js實現左右滑動的導航菜單，仿今日頭條頂部菜單

智能推薦

猜你喜歡