博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端H5单页面跟随手指滑动切换组件PageSlider
阅读量:5878 次
发布时间:2019-06-19

本文共 1415 字,大约阅读时间需要 4 分钟。

hot3.png

PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件,支持通过transform3D启动GPU加速,目前仅支持移动端touch设备。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!
DOCTYPE 
html>
<
html
>
<
head
>
    
<
meta 
charset
=
"utf-8"
>
    
<
meta 
name
=
"viewport" 
content
=
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
/>
    
<
meta 
content
=
"telephone=no" 
name
=
"format-detection"
/>
    
<
meta 
name
=
"description" 
content
=
""
/>
    
<
meta 
name
=
"keywords" 
content
=
""
/>
    
<
title
>demo - pageSlider</
title
>
    
<!--引入pageSlider所需样式表-->
    
<
link 
rel
=
"stylesheet" 
href
=
"css/pageSlider.css"
>
    
<!--引入zepto.js-->
    
<
script 
src
=
"http://cdn.bootcss.com/zepto/1.1.4/zepto.js"
></
script
>
    
<!--引入pageSlider.js文件-->
    
<
script 
src
=
"js/pageSlider.js"
></
script
>
<
body
>
    
<!--DOM结构-->
    
<
div 
class
=
"section sec1" 
style
=
"background-color:#FFCCCC;"
>1<
p
>向下滑动</
p
></
div
>
    
<
div 
class
=
"section sec2" 
style
=
"background-color:#4ACBF7;"
>2</
div
>
    
<
div 
class
=
"section sec3" 
style
=
"background-color:#63E339;"
>3</
div
>
    
<
div 
class
=
"section sec4" 
style
=
"background-color:#F7D34A;"
>4</
div
>
    
<
div 
class
=
"section sec5" 
style
=
"background-color:#FF8ECE;"
>5</
div
>
    
<
div 
class
=
"section sec6" 
style
=
"background-color:#ACDCED;"
>6</
div
>
 
    
<
script
>
        
$(function(){
            
var pageSlider = PageSlider.case();
        
});
    
</
script
>
</
body
>
</
html
>

转载于:https://my.oschina.net/u/2456768/blog/664612

你可能感兴趣的文章
用于守护进程的出错处理函数
查看>>
memcached 分布式聚类算法
查看>>
禁止body滚动允许div滚动防微信露底
查看>>
Xtreme8.0 - Kabloom dp
查看>>
jquery css3问卷答题卡翻页动画效果
查看>>
MDK5.00中*** error 65: access violation at 0xFFFFFFFC : no 'write' permission的一种解决方法
查看>>
Android 集成支付宝支付详解
查看>>
SQL分布式查询、跨数据库查询
查看>>
C#------连接SQLServer和MySQL字符串
查看>>
Arcgis Licensemanager 不能启动的原因之一(转载)
查看>>
(原)Android在子线程用handler发送的消息,主线程是怎么loop到的?
查看>>
$digest already in progress 解决办法——续
查看>>
虚拟机 centos设置代理上网
查看>>
Struts2中Date日期转换的问题
查看>>
mysql 数据类型
查看>>
Ubuntu 设置当前用户sudo免密码
查看>>
设置tomcat远程debug
查看>>
android 电池(一):锂电池基本原理篇【转】
查看>>
Total Command 常用快捷键
查看>>
ionic 调用手机的打电话功能
查看>>