技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

如何让整个web页面滑动切换

来源: 技术CTO 阅读:

请问有谁知道怎么做移动端页面左右滑动切换的呀?类似今日头条的效果,每个页面还要能够上拉加载,下拉刷新。哪位好心人曾经做过类似的,帮帮忙呗!非常感谢!

iscroll插件可以做到

引用 1 楼 u012386311 的回复:
iscroll插件可以做到


你可以去官网下载iscroll。有很多实例
实现页面左右滑动的同时,可以让页面高度自定义吗?每个页面高度都是不一样的,我看的好多都是图片轮播的
<!DOCTYPE html>
<html>
<head>
<style>
div{ float:left;}
</style>
</head>
<body>
<div style="background:#FF0000; height:500px; width:500px; overflow-x:scroll">
<div style="width:1000%; height:100%;">
        <div   style="height:100%; width:500px; background:#CC33FF">
        </div>
        <div  style="height:100%; width:500px; background:#9F0; overflow-y:scroll">
         <div style="width:60%; height:60%; margin:20%;background:#9F0; overflow-x:scroll">
             <div style=" width:300%; height:100%;">
                 <div style="background:#000000; width:33.333%; height:100%;"></div>
                    <div style="background:#999; width:33.333%; height:100%;"></div>
                    <div style="background:#FFFFFF; width:33.334%; height:100%;"></div>
                </div>
            </div>
         <div style="width:100%; height:100%; background:#00CCFF;"></div>
            <div style="width:100%; height:100%; background:#FF0;"></div>
        </div>
        <div style="height:100%; width:500px;; background:#00F;">
        </div>
        <div style="height:100%; width:500px;; background:#000;">
        </div>
    </div>
</div>
</body>
</html> 

JQUERY控制滚动条 平缓滚动
引用 1 楼 jinhuazhe2013的回复:
iscroll插件可以做到

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^