swiper實現區域性內容滾動效果

阿新 • • 發佈：2019-02-11

先看一下效果圖:

這裡寫圖片描述

在藍色的背景裡面文字可以上下滾動，這個就是我們需要的效果。

具體程式碼如下：

<!DOCTYPE html>
<!-- saved from url=(0054)http://www.swiper.com.cn/demo/32-scroll-container.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Swiper demo</title 
>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./swiper-3.4.2.min.css">

    <!-- Demo styles -->
    <style>
    html, body 
 {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        margin-top: 50px;
        height 
: 300px;
        overflow: hidden;
        background: cyan;
    }
    .swiper-slide {
        font-size: 18px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 30px;
        font-size:13px;font-family:microsoft yahei; line-height:1.8;
    }
    p{

        margin-bottom:1em;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container swiper-container-vertical swiper-container-free-mode">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-active">
                <h4>-------------------------程式猿,你也配吃10元的盒飯?----------------------------------</h4>
                <p>又是一個陽光燦爛的中午，看了一上午的報紙，茶水也順帶喝了不少，肚子早已經咕咕作響了，今天中午吃點什麼了，貌似樓下的新開張的盒飯還不錯，於是我來到樓下準備買上一盒。<br>
  菜色還不錯，價格有6元，8元，10元，12元，20元的，像哥這樣的精英管理人才，怎麼著也的吃最高階的才配合身份，就在我準備購買時，一個響亮的聲音響起。</p>
  <p>"老闆，給我一份10元的盒飯"。</p>
  <p>順勢撇了一眼，一個小夥子，眉開眼笑的靠近盒飯鋪，今天是1號，看樣子是發工資了。就當他走近時，看到了我，剛才的歡愉的表情瞬時黯淡下去，他知道我認出了他，靠，滿頭白裡帶一點黑的頭髮，永遠沒睡醒的眼神，以及那凌亂的鬍渣子，都出賣了他的身份。我繼續狠狠的盯著他，他越發的羞愧了，我犀利的眼神正在和他做著底層通訊，我默默的向他傳達一個資訊，<br>
  "你，也配吃10元的盒飯?"。</p>
 <p> 他哀憐的眼神似乎在祈求我不要拆穿他的身份，可惜，哥這麼有正義感的人，怎麼能在這個時候放棄原則!<br>
  "你不是隔壁公司的程式設計師麼?"<br>
  就這一瞬間，他整個人似乎崩潰下去，剛才歡愉的表情徹底變為哭喪，周圍的小攤販以及路人甲乙丙丁，都紛紛投來了鄙視的眼光，他瘟雞一樣的雙手抓著頭髮，痛苦的蹲了下去。</p>
 <p> 就在這時，人群中終於有人忍不住了，大聲呵罵到，<br>
  "呸，程式設計師也敢吃10元的盒飯，真不要臉"<br>
  一位老大娘好心的提醒到，<br>
  "小夥子啊，你一個程式設計師，掙點錢不容易啊，怎麼吃10元的盒飯啊"</p>
  <p>一名打扮妖豔入時的姑娘說到，<br>
  "人家當小姐的都才吃10元，你也敢要10元的?"<br>
  我義正言辭的給他說到，<br>
  "我說一句話頂你寫一萬行程式碼，也才吃20元的盒飯，你竟敢吃10元的"<br>
  老闆也發話了，<br>
  "是程式設計師啊，太不好意思了，你吃6元的吧，不然人家知道我賣了你10元的，我這生意就做不了啊"</p>
 <p> 他終於發出顫抖的聲音說到<br>
  "對不起，我剛才說錯了，給我一份6元的"。<br>
  這時人群中爆發出激烈的掌聲，我知道，這是我又一次堅持原則，換來的榮譽的讚賞!
&nbsp;</p>
            </div>
        </div>
        <!-- Add Scroll Bar -->
        <div class="swiper-scrollbar" style="opacity: 0;"><div class="swiper-scrollbar-drag" style="height: 532.742px;"></div></div>
    </div>

    <!-- Swiper JS -->
    <script src="./swiper-3.4.2.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        roundLengths : true, //防止文字模糊
    });
    </script>

</body></html>

swiper實現區域性內容滾動效果

先看一下效果圖: 在藍色的背景裡面文字可以上下滾動，這個就是我們需要的效果。具體程式碼如下： <!DOCTYPE html> <!-- saved from u

js實現內容滾動效果

首先說下實現內容滾動效果的思路：在一塊區域內實現內容滾動效果，要求內容輪播，那麼如何實現輪播呢？我們將原內容複製一份放置其後面，當原內容滾動完成（即父層scrollTop等於原內容區高度時），我們將父層scrollTop設定為0，此時又從原內容開始滾動。如果瀏覽

純css3實現文字間歇滾動效果

vue gin span 需要 display () app counter happy 場景：假設有4條數據或者標題，視口中只顯示兩條，采用每次向上滾動一條數據來展示所有的數據。效果如圖：用JavaScript也很容易實現，但是需要操作DOM，可以參考這篇博客。考慮

jQuery實現區域性區域滾動條滾動到底部自動載入資料的問題總結與實現方法

1 需求背景在我們做管理系統，需要從後臺資料庫取出資料顯示到前臺時，可能我們的做法就是將資料全部取出然後利用jQuery動態新增到表格當中，但是當我們取出的量非常大時問題就出現了，我們會發現頁面載入的速度非常慢，這時我們就可利用分頁或者這種監聽滾動條來自動載入資料，這種技術也稱為“

js實現文字上下滾動效果【贊】

大家都知道，做html頁面時，為了提升網頁的使用者體驗，我們需要在網頁中加入一些特效，比如單行區域文字上下滾動就是經常用到的特效。如下圖示效果：完整 html 頁面程式碼，可以直接執行 <html> <head> <title>js實現文字上下滾

JQuery實現文字無縫滾動效果(Marquee外掛)

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo使用方法如下：1、載入javascript。<scripttype="te

html之marquee實現圖片文字滾動效果詳解

在製作網頁的時候，很多情況下會遇到需要某一個文字或者圖片像廣告那樣水平或者垂直的滾動，這樣的效果JavaScript可以製作，但是比較麻煩，直接看那些程式碼會感覺到非常的複雜。這裡我們來介紹一種簡單的方式實現這樣效果，他就是HTML標籤中的marquee，他其實是一個容器標籤。

JQuery實現文字無縫滾動效果 Marquee外掛

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo 使用方法如下： 1、載入javascript。 &

Android 實現ListView不可滾動效果

希望得到的效果是ListView不能滾動，但是最大的問題在與ListView Item還必有點選事件，如果不需要點選事件那就簡單了，直接設定ListView.setEnable(false); 如果還需要點選事件，滾動與點選都是在ListView Touc

JS 實現自定義滾動效果2

//獲得當前scroll var timer = null; var ulList = $(".scroll .scrollBox"); myScrollFunction(ulList, timer); function myScrollFunction(obj, timerObj) {

JS 實現自定義滾動效果

var timer = null; //獲得當前滾動盒子scrollBox var ulList = $(".scroll ul.scrollBox"); //獲得當前scrollBox裡面滾動元素的個數 var ulNum = $(".scroll ul.scrollBox").childre

如何ScrollView在XIB或者Storyboard中設定約束並實現翻頁滾動效果

使用XIB對檢視進行約束非常簡單，也很方便，節省了很多程式碼量，這是眾所周知的事情！但是UIScrollView的約束在XIB裡面比較複雜，而且有時候對它進行約束會經常出錯，當然，這是對你沒有在SV(以下UIScrollView簡稱)上放置別的檢視來說，假如你要

android之ViewPager簡單實現區域性頁面滑動效果

-Viewpager能實現什麼效果？ -實現左右滑動，切換view的效果。 -既可以實現整個頁面左右滑動，也可以實現同一個頁面中區域性左右滑動。搞清楚viewpager的作用後，開始寫一個簡單例子，實現同一個頁面中區域性滑動的效果。在coding前要做的準備工作 2

安卓實現走馬燈效果 textview 實現字型迴圈滾動效果

使在layout 中實現文字滾動效果也就是走馬燈的效果只需要在響應控制元件裡面加上這幾行程式碼就可以 1 android:singleLine="true" android:ellipsize="marquee"

內容滾動效果

HTML部分<div class="biao"> <p class="qy" style="color: goldenrod;">最新簽約商家</p> <ul class="js-slide-list"> &

css實現h5頁面滾動效果

由於手機螢幕空間較小，在手機端顯示分類導航多時一行顯示不全，常常在後面顯示一個'更多',點選展開全部，選擇後再隱藏。這種互動不時很完美，在使用者反覆選擇時，就得來回點使其展開、隱藏。在移動端有更好的展示方式，如'蜻蜓FM'app上的節目分類是採用的左右滾動方式，方便使

JS實現圖片無縫滾動效果

首先，藉助一張草圖來簡單說明一下往左移動的做法（往右相同）。如上圖所示，圖片的無縫滾動原理其實是把滾動的圖片複製成兩份並聯排列，當滾動完一次後就把圖片扯回到起點，重新滾動。這裡的往左運動把圖片扯回起點的臨界點是offsetLeft的絕對值大於offset

微信小程式swiper實現滑動放大縮小效果

<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange"> <block wx:for=

使用Swiper實現無線滾動效果

在HTML body加入以下內容： <div class="m-detail-show">  <div class="swipe

JQuery實現頁面隨滾動條滾動而動態載入內容的效果

新浪微博有這個功能,剛才思考一下 ,簡單的寫了一下實現方法,程式碼是Js的. 無可否認,這種方式應該算是web2.0的產物,在使用者體驗上具備很好的感受,除了微博在使用該方式外,另外我還發現有幾個其他性質的網站也在用這種方式,原因是他們的網站頁面比較長,所以使用者在瀏覽的時候隨著滾動條的

swiper實現區域性內容滾動效果

相關推薦