hammer.js方法总结(只做了一个简单的demo)
html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.demo-box {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
} .demo-box img {
height: 500px;
width: 1900px;
position: absolute;
margin-left: -950px;
pointer-events: none;
margin-top: -220px;
left: 50%;
top: 50%;
max-width: none;
} .demo-box img.active {
display: block;
} .demo-box .page-num {
position: absolute;
bottom: 5px;
left: 50%;
margin-left: -20px;
color: white;
z-index: 999;
background: rgba(170, 170, 170, 0.5);
padding: 3px;
border-radius: 5px;
border: 1px solid black;
pointer-events: none;
} .page-num .active {
color: red;
} .demo-box .page-num {
color: white;
pointer-events: none;
} .demo img {
display: inline-block;
} .box img {
display: none;
} .demo-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(70, 70, 70, 0.8);
display: none;
} .demo-overlay img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>
</head> <body class="homepage">
<div class="pan demo-box demo">
<img src="img/box.png" />
</div>
<br />
<br />
<br />
<br />
<div class="pinch demo-box demo">
<img src="img/box.png" />
</div>
<br />
<br />
<br />
<br />
<div class="rotate demo-box demo">
<img src="img/box.png" />
</div>
<br />
<br />
<br />
<br />
<div class="swipe demo-box box">
<img src="img/xsqy.png" class="active" />
<img src="img/jfsc.png" />
<img src="img/fx.png" />
<div class="page-num">
<span class="active">1</span>
<span class="">2</span>
<span class="">3</span>
</div>
</div>
<br />
<br />
<br />
<br />
<div class="tap demo-box box">
<img src="img/xsqy.png" class="active" />
<img src="img/jfsc.png" />
<img src="img/fx.png" />
<div class="page-num">
<span class="active">1</span>
<span class="">2</span>
<span class="">3</span>
</div>
</div>
<br />
<br />
<br />
<br />
<div class="press demo-box demo">
<img src="img/box.png" />
<div class="demo-overlay">
<img src="img/shouhuodizhicheckz.png">
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script> //自行下载
<script type="text/javascript" src="js/hammer.js"></script> //自行下载
<script type="text/javascript" src="js/hammer-index.js"></script> //以下代码 </html>
hammer-index.js
$(function() {
(function() {
var img, margin;
new Hammer($(".pan")[0], {
domEvents: true
});
$(".pan").on("panstart", function(e) {
img = $(".pan img");
margin = parseInt(img.css("margin-left"), 10);
});
$(".pan").on("pan", function(e) {
var delta = margin + e.originalEvent.gesture.deltaX;
console.log(delta);
if(delta >= -1750 && delta <= -150) {
img.css({
"margin-left": margin + e.originalEvent.gesture.deltaX
});
}
});
})();
// pinch
(function() {
var ham = new Hammer($(".pinch")[0], {
domEvents: true
});
var width = $(window).width();
var height = $(window).height();
var left = 950;
var top = 220;
ham.get('pinch').set({
enable: true
});
$(".pinch").on("pinch", function(e) {
console.log("pinch");
if(width * e.originalEvent.gesture.scale >= 300) {
$(this).find("img").css({
width: width * e.originalEvent.gesture.scale,
"margin-left": -left * e.originalEvent.gesture.scale,
height: height * e.originalEvent.gesture.scale,
"margin-top": -top * e.originalEvent.gesture.scale
});
}
console.log(e.originalEvent.gesture.scale);
});
$(".pinch").on("pinchend", function(e) {
width = width * e.originalEvent.gesture.scale;
height = height * e.originalEvent.gesture.scale;
left = left * e.originalEvent.gesture.scale;
top = top * e.originalEvent.gesture.scale;
console.log(width);
});
})();
// rotate
(function() {
var ham = new Hammer($(".rotate")[0], {
domEvents: true
});
var liveScale = 1;
var currentRotation = 0;
ham.get('rotate').set({
enable: true
});
$(".rotate").on("rotate", function(e) {
alert(1)
var rotation = currentRotation + Math.round(liveScale * e.originalEvent.gesture.rotation);
$(this).find("img").css("transform", "rotate( " + rotation + "deg)");
});
$(".rotate").on("rotateend", function(e) {
currentRotation += Math.round(e.originalEvent.gesture.rotation);
});
})();
(function() {
new Hammer($(".swipe")[0], {
domEvents: true
});
var current = 0;
var imgs = $(".demo-box.swipe img");
var pages = $(".swipe .page-num span");
$(".swipe").on("swipeleft", function(e) {
if(imgs[current + 1]) {
imgs.removeClass("active");
imgs.eq(++current).addClass("active");
pages.removeClass("active");
pages.eq(current).addClass("active");
}
});
$(".swipe").on("swiperight", function(e) {
if(imgs[current - 1]) {
imgs.removeClass("active");
imgs.eq(--current).addClass("active");
pages.removeClass("active");
pages.eq(current).addClass("active");
}
});
})();
// tap
(function() {
new Hammer($(".tap")[0], {
domEvents: true
});
var current = 0;
var imgs = $(".demo-box.tap img");
var pages = $(".tap .page-num span");
$(".tap").on("tap", function(e) {
console.log("tap");
if(imgs[current + 1]) {
current++;
} else {
current = 0;
}
console.log(current);
imgs.removeClass("active");
imgs.eq(current).addClass("active");
pages.removeClass("active");
pages.eq(current).addClass("active");
});
})();
// press
(function() {
new Hammer($(".press")[0], {
domEvents: true
});
$(".press").on("press", function(e) {
$(".demo-overlay").toggle();
});
})();
})
hammer.js方法总结(只做了一个简单的demo)的更多相关文章
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...
- 一个简单的demo学习Android远程Service（AIDL的使用）
这是milo很早之前写在论坛上的一个帖子,现在整理出来,milo也复习一下一般来说Android 的四大组件都是运行在同一个进程中的,但远程Service运行在不同的进程里.这进程间的通信是使用了An ...
- MyBatis 学习记录1 一个简单的demo
主题 最近(N个月前)clone了mybatis的源码..感觉相比于spring真的非常小...然后看了看代码觉得写得很精简...感觉我的写代码思路和这个框架比较相似(很难具体描述...就是相对来说比 ...
- JS 的execCommand 方法 做的一个简单富文本
execCommand 当一个 HTML 文档切换到设计模式(designMode)时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容.大多数命令影响文档的选择( ...
- 我做的一个websocket的demo(php server)
notice: 通过命令行执行php文件 如 php -q c:\path\server.php 通过本地web服务器访问 http://127.0.0.1/websocket/index.php即 ...
- 如何用vs2013开发人员命令提示工具执行一个方法（一个简单的demo）
在任何一个编辑器中编写一个静态的Main方法,必须是静态且名为Main的方法,并将Main方法所在的类文件命名为yang.cs(这个名字随便命名),如图-1. 图-1 打开你的vs2013开发人员命令 ...
- 用if做了一个简单的猜拳游戏（做的不好还请指点，谢谢！）
#include "stdio.h" #include "stdlib.h" #include "time.h" //随机函数的头文件 ma ...
- 用ios做的一个简单的记事本
#import "ViewController.h" @interface ViewController ()@property (weak, nonatomic) IBOutle ...
- 使用extjs做的一个简单grid
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
随机推荐
- FFmpeg：视频转码、剪切、合并、播放速调整
原文:https://fzheng.me/2016/01/08/ffmpeg/ FFmpeg:视频转码.剪切.合并.播放速调整 2016-01-08 前阵子帮导师处理项目 ppt,因为插入视频的格式问 ...
- 使用msi自动安装系统
在实际生活中, 还是要尽量使用 自动化 脚本 等来处理/执行问题, 那样更快更省力省时间 要多使用 网络工具, 网络工具在 管理/ 使用网络的过程 中还是很有用的. 要有这种 "多使用网络工 ...
- CentOS7使用httpd apache 和firewalld打开关闭防火墙与端口
Centos7 使用systemctl 工具操作命令 systemctl 是Centos7的服务管理工具中的主要工具 ,它融合之前service和chkconfig的功能于一体 一.httpd的设置 ...
- Docker、Kubenets使用前配置
1.开发人员需要确保机器上装有Docker并准确配置了Registry,能否推送相关镜像到Registry(运维人员无此要求) 2.能够访问Kubernetes APIServer相关API, 拥有相 ...
- Eclipse卸载插件SpringSoource-tool-suite
Eclipse卸载插件SpringSoource-tool-suite **系统环境:**Mac OS X 引子: 一直在纠结的一个问题,就是Eclipse开发java 项目在配置了InternalR ...
- FICO年终完全手册
FICO年终完全手册 一:系统增加配置部分 1,FBN1增加凭证号码范围,OBH2维护会计凭证号码到新的会计年度 2,KS13检查成本中心的有效期 3,KA23检查成本要素的有效期 4,KL03检查作 ...
- python 安装插件 requests、BeautifulSoup
安装第三方插件库 1. requests , 下载地址 https://github.com/requests/requests 安装: 利用 pip 安装 pip3 install request ...
- Spring-MVC依赖
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api& ...
- hdu 1392 Surround the Trees 凸包裸题
Surround the Trees Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Redis 图形化监控方案 RedisLive
一款开源的 Redis 图形化监控工具,界面如图所示 安装 首先安装python2 一般情况下系统自带 然后安装pip2 https://www.cnblogs.com/sea-stream/p/10 ...