swiper实现局部内容滚动效果
生活随笔
收集整理的這篇文章主要介紹了
swiper实现局部内容滚动效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
先看一下效果圖:
在藍(lán)色的背景里面文字可以上下滾動(dòng)，這個(gè)就是我們需要的效果。
具體代碼如下：
<!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="https://cdn.bootcss.com/Swiper/4.4.6/css/swiper.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;-webkit-overflow-scrolling: touch}.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>又是一個(gè)陽(yáng)光燦爛的中午，看了一上午的報(bào)紙，茶水也順帶喝了不少，肚子早已經(jīng)咕咕作響了，今天中午吃點(diǎn)什么了，貌似樓下的新開(kāi)張的盒飯還不錯(cuò)，于是我來(lái)到樓下準(zhǔn)備買(mǎi)上一盒。<br>菜色還不錯(cuò)，價(jià)格有6元，8元，10元，12元，20元的，像哥這樣的精英管理人才，怎么著也的吃最高級(jí)的才配合身份，就在我準(zhǔn)備購(gòu)買(mǎi)時(shí)，一個(gè)響亮的聲音響起。</p><p>"老板，給我一份10元的盒飯"。</p><p>順勢(shì)撇了一眼，一個(gè)小伙子，眉開(kāi)眼笑的靠近盒飯鋪，今天是1號(hào)，看樣子是發(fā)工資了。就當(dāng)他走近時(shí)，看到了我，剛才的歡愉的表情瞬時(shí)黯淡下去，他知道我認(rèn)出了他，靠，滿頭白里帶一點(diǎn)黑的頭發(fā)，永遠(yuǎn)沒(méi)睡醒的眼神，以及那凌亂的胡渣子，都出賣(mài)了他的身份。我繼續(xù)狠狠的盯著他，他越發(fā)的羞愧了，我犀利的眼神正在和他做著底層通信，我默默的向他傳達(dá)一個(gè)信息，<br>"你，也配吃10元的盒飯?"。</p><p> 他哀憐的眼神似乎在祈求我不要拆穿他的身份，可惜，哥這么有正義感的人，怎么能在這個(gè)時(shí)候放棄原則!<br>"你不是隔壁公司的程序員么?"<br>就這一瞬間，他整個(gè)人似乎崩潰下去，剛才歡愉的表情徹底變?yōu)榭迒?#xff0c;周?chē)男傌溡约奥啡思滓冶?#xff0c;都紛紛投來(lái)了鄙視的眼光，他瘟雞一樣的雙手抓著頭發(fā)，痛苦的蹲了下去。</p><p> 就在這時(shí)，人群中終于有人忍不住了，大聲呵罵到，<br>"呸，程序員也敢吃10元的盒飯，真不要臉"<br>一位老大娘好心的提醒到，<br>"小伙子啊，你一個(gè)程序員，掙點(diǎn)錢(qián)不容易啊，怎么吃10元的盒飯啊"</p><p>一名打扮妖艷入時(shí)的姑娘說(shuō)到，<br>"人家當(dāng)小姐的都才吃10元，你也敢要10元的?"<br>我義正言辭的給他說(shuō)到，<br>"我說(shuō)一句話頂你寫(xiě)一萬(wàn)行代碼，也才吃20元的盒飯，你竟敢吃10元的"<br>老板也發(fā)話了，<br>"是程序員啊，太不好意思了，你吃6元的吧，不然人家知道我賣(mài)了你10元的，我這生意就做不了啊"</p><p> 他終于發(fā)出顫抖的聲音說(shuō)到<br>"對(duì)不起，我剛才說(shuō)錯(cuò)了，給我一份6元的"。<br>這時(shí)人群中爆發(fā)出激烈的掌聲，我知道，這是我又一次堅(jiān)持原則，換來(lái)的榮譽(yù)的贊賞! </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="https://cdn.bootcss.com/Swiper/4.4.6/js/swiper.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>總結(jié)
以上是生活随笔為你收集整理的swiper实现局部内容滚动效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 幼儿园时间管理《小明的一天》幼小衔接数学
- 下一篇： 你知道六一也是父母节吗230个