首页 > Web开发 > 详细

css实现滑动操作

时间:2018-05-04 16:26:41      阅读:162      评论:0      收藏:0      [点我收藏+]

CSS 滑动操作的原理与轮播图原理类似:

子盒子宽度或者高度超出父盒子宽度或者高度,隐藏滚动条,就可以实现滑动操作:

  • html 结构如下:

    
    
    <div class="box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

     

    CSS 代码如下:

    
    
    * {
                padding: 0;
                margin: 0;
            }
            .box {
                width: 500px;
                border: 1px solid black;
                height: 100px;
                overflow: scroll;
    ?
            }
            .box::-webkit-scrollbar {
                display: none;  
            }
            ul {
                list-style: none;
                width: 800px;
            }
            li {
                width: 100px;
                height: 100px;
                background-color:red;
                border: 1px solid black;
                float: left;
            }

     

     

css实现滑动操作

原文:https://www.cnblogs.com/guotaodexiaoheiban/p/8990819.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!