该示例演示了如何利用Hammer.js库，在网页中实现图片的拖动、旋转和缩放功能。通过监听'touch'、'drag'和'transform'事件，实时更新图片的位置、旋转角度和缩放比例，并应用CSS3的transform属性来完成视觉效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="user-scalable=no , width=device-width , initial-scale=1 , maximum-scale=1">
<script type="text/javascript" src="hammer.min.js"></script>
<style>
body{padding:0; overflow:hidden;}
#pinchzoom{overflow:hidden; width:300px; height:300px; background-color:#eee;}
</style>
</head>
<body>
<div id="pinchzoom">
<img id="img" src="http://pr.bdimg.com/static/princess/img/misc/baidu_logo_c352a179.gif" οndragstart="return false" alt="" />
</div>
<script>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="user-scalable=no , width=device-width , initial-scale=1 , maximum-scale=1">
<script type="text/javascript" src="hammer.min.js"></script>
<style>
body{padding:0; overflow:hidden;}
#pinchzoom{overflow:hidden; width:300px; height:300px; background-color:#eee;}
</style>
</head>
<body>
<div id="pinchzoom">
<img id="img" src="http://pr.bdimg.com/static/princess/img/misc/baidu_logo_c352a179.gif" οndragstart="return false" alt="" />
</div>
<script>
最低0.47元/天 解锁文章
扫一扫
5436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
