swiper实现局部内容滚动效果

来源：互联网发布：软件实施工程师前景编辑：程序博客网时间：2024/05/17 21:48
先看一下效果图:
这里写图片描述
在蓝色的背景里面文字可以上下滚动，这个就是我们需要的效果。
具体代码如下：
<!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>
阅读全文
0 0