利用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元素 ...
随机推荐
- 洛谷P3396 哈希冲突 (分块)
洛谷P3396 哈希冲突 题目背景 此题约为NOIP提高组Day2T2难度. 题目描述 众所周知,模数的hash会产生冲突.例如,如果模的数p=7,那么4和11便冲突了. B君对hash冲突很感兴趣. ...
- GYM 101875 2018 USP-ICMC
3月自训 (1):10/12 A: 题意:每个人可以连边,最远连到第(i+k)%n个人,边权为这个人与另一个人连边距离,求生成一颗最大生成树的权值和是多少 题解:可以证明的是,我们每一个人都向接下来的 ...
- derby数据库windows自带的客户端
本示例演示用windows自带的ij来操作derby数据库,包括建库,建表,插入数据,查询数据 首先要配置环境变量: 其次打开cmd输入如下图所示的命令: java代码如下: package com. ...
- mysql的主从复制原理与实现
关于mysql的主从复制,之前一直在听说这个话题,一直没有实现,昨天学习了下,原来是这么回事: 既然是主从复制,那么肯定有主有从,也就说一个主数据库(一般为写库),一个从数据库(读库).主数据库更新了 ...
- [ubuntu]对指定区域截图
ctrl+shift 鼠标变成正十字. 按住右键就可以随意截图了. 设置方法: 打开系统设置面板 system settings --> keyboard --> shortcuts - ...
- 大道至简第一章伪代码读后感o(╯□╰)o
import.java.io*; import class duhougan; public static void main(Striing arges[]){ system.out.println ...
- 裸机配置C语言运行环境
C语言程序的执行需要栈的支持.部分soc未初始化栈的情况下调用C语言程序会发生错误. start.S中一共配置了看门狗,svc栈,icache. 在x210中看门狗默认关闭,svc栈默认开启,icah ...
- 20155335俞昆《java程序设计》第十周总结
学号 2016-2017-2 <Java程序设计>第十周学习总结 ## 事实上网络编程,我们可以简单的理解为两台计算机相互通讯数据而已,对于程序员而言,掌握一种编程接口并使用一种编程模型相 ...
- elementui table 多选 获取id
//多选相关方法 toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggl ...
- win10以前连接过的wifi密码怎么查看
右键点击开始,在菜单中选择打开命令提示符,以管理员的权限打开. 然后输入命令netsh wlan show profile显示以前此电脑连接过的所有WIFI记录配置信息. 确定要查看的WIFI ...