swiper实现局部内容滚动效果

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

先看一下效果图:

这里写图片描述
这里写图片描述
这里写图片描述

在蓝色的背景里面文字可以上下滚动,这个就是我们需要的效果。

具体代码如下:

<!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;
		-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>又是一个阳光灿烂的中午,看了一上午的报纸,茶水也顺带喝了不少,肚子早已经咕咕作响了,今天中午吃点什么了,貌似楼下的新开张的盒饭还不错,于是我来到楼下准备买上一盒。<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>
  这时人群中爆发出激烈的掌声,我知道,这是我又一次坚持原则,换来的荣誉的赞赏!
 </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>

点这里可以跳转到人工智能网站

发表评论