利用jquery.touchSwipe.js实现的移动滑屏效果。
利用jquery.touchSwipe.js实现的移动滑屏效果。
亲测：兼容ie8及各种浏览器
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> 点击下载
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
.container{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0%;
}
.container .page{
height: 100%;
position: relative;
}
.container .page0{
background-color: blue;
}
.container .page1{
background-color: pink;
}
.container .page2{
background-color: yellow;
}
.container .page3{
background-color: green;
}
.container .page4{
background-color: tomato;
}
.xiangxiatishi{
position: fixed;
bottom: 20px;
left: 50%;
-webkit-transform:translateX(-50%);
-webkit-animation:dong 1s linear 0s infinite alternate;
}
@-webkit-keyframes dong{
from{
bottom:20px;
}
to{
bottom: 60px;
}
}
<body onmousewheel="return false;">
<div class="container">
<div class="page page0 cur"><h1>你好，我是0号屏幕</h1>
</div> <div class="page page1">
<h1>你好，我是1号屏幕</h1>
<!-- <img class="no1" src="img/1.png" />
<img class="no2" src="img/2.png" /> -->
</div>
<div class="page page2"><h1>你好，我是2号屏幕</h1></div>
<div class="page page3"><h1>你好，我是3号屏幕</h1></div>
<div class="page page4"><h1>你好，我是4号屏幕</h1></div>
</div> <img class="xiangxiatishi" src="img/prompt.png" alt="向下来一下~"/> </body>
$(document).ready(
function() {
var nowpage = 0;
//给最大的盒子增加事件监听
$(".container").swipe(
{
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == "up"){
nowpage = nowpage + 1;
}else if(direction == "down"){
nowpage = nowpage - 1;
} if(nowpage > 4){
nowpage = 4;
} if(nowpage < 0){
nowpage = 0;
} $(".container").animate({"top":nowpage * -100 + "%"},400); $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
}
}
);
}
);
利用jquery.touchSwipe.js实现的移动滑屏效果。的更多相关文章
- 利用轮播原理结合hammer.js实现简洁的滑屏功能
最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- 利用jquery.form.js实现将form提交转为ajax方式提交的方法（带上传的表单提交）
提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像
纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...
- jquery.flexslider-min.js实现banner轮播图效果
实现方法 引用jQuery和flexslider.js到你的页面 <script type="text/javascript" src="js/jquery-1.7 ...
- 利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果
参考链接:https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search. */
- jQuery+fullPage.js演示10种全屏滚动
基本演示 背景演示 循环演示 回调函数演示 绑定菜单演示 项目导航演示 自动滚动 slide自动滚动 响应式 下载地址 实例代码 <!DOCTYPE html> <html lang ...
- jQuery遮罩插件jQuery.blockUI.js简介
利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...
随机推荐
- acm1878欧拉回路
欧拉回路解释 对于本题我们只要把每个点的度进行记录,判断是否存在奇数度的点,如果是就可以判断不是欧拉回路,如果不是就在一个点出发,进行dfs搜索, 看能否走到起点,因为对于欧拉回路是一个闭合的回路,无 ...
- phpstorm 安装
16 sudo apt-get install python-software-properties 17 sudo add-apt-repository ppa:webupd8team/java 1 ...
- git fatal: 拒绝合并无关的历史的错误解决
本地初始化的项目 与 github 版本不一致, 导致无法提交 $ git pull origin master 来自 https://github.com/itaken/python-login-d ...
- android中dip、dp、px、sp和屏幕密度
1. dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这 这个 ...
- 【Android】完善Android学习（一：API 2.3.3）
备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...
- Kubernetes: 集群网络配置 - flannel
参考: [ Kubernetes 权威指南 ] Kubernetes 集群搭建可以参考 [ Kubernetes : 多节点 k8s 集群实践 ] 在多个 Node 组成的 Kubernetes 集群 ...
- GXC 钱包部署
参考: [ 官方 wiki ] 基于 Ubuntu 的 GXC 部署 基础环境 OS: Ubuntu gxc: 官方 [ release 最新版本 ] 下载 release 包(ubuntu) cd ...
- Network（POJ3694+边双连通分量+LCA）
题目链接:http://poj.org/problem?id=3694 题目: 题意:给你一个n个点m条边的无向连通图,进行q次操作,每次操作在u和v之间加一条边,问每次操作之后“桥”的数量. 思路: ...
- Atlantis（POJ1151+线段树+扫描线）
题目链接:http://poj.org/problem?id=1151 题目: 题意:求所有矩形的面积,重合部分只算一次. 思路:扫描线入门题,推荐几篇学扫描线的博客: 1.http://www.cn ...
- DotNETCore 学习笔记 WebApi
API Description Request body Response body GET /api/todo Get all to-do items None Array of to-do ite ...