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 { 300px; height: 300px; overflow: hidden; position: relative; } .demo-box img { height: 500px; 1900px; position: absolute; margin-left: -950px; pointer-events: none; margin-top: -220px; left: 50%; top: 50%; max- 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 { 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 * 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();
});
})();
})