jquery手指触摸滑动放大图片的方法(比较靠谱的方法)详解编程语言

jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

 !DOCTYPE html 
 html lang="zh-cn" 
 head 
 title touch.js demo /title 
 meta charset="utf-8" / 
 meta name="viewport" content="width=device-width, initial-scale=1" / 
 script type="text/javascript" src="{$yuming}/touchjs/js/touch.min.js" /script 
 script type="text/javascript" src="{$yuming}/touchjs/js/cat.touchjs.js" /script 
 script type="text/javascript" src="{$yuming}/touchjs/js/jquery-1.10.2.min.js" /script 
 /head 
 body 
 style 
 .tcpiccontainer{
 width:100%;
 height: 100%;
 position: absolute;
 left:0px;
 top:0px;
 z-index: 999;
 background: #000;
 }
 .tcpiccontainer img{
 width:100%;
 position: absolute;
 margin-top: 11rem;;
 }
 /style 
 div 
 img id="targetObj" src="http://demo.somethingwhat.com/images/flower1.jpg" / 
 /div 
 

 !-- 初始化500毫秒后 再操作-- 
 script type="text/javascript" 
 $(function () {
 var $targetObj = $(#targetObj);
 //初始化设置
 cat.touchjs.init($targetObj, function (left, top, scale, rotate) {
 $(#left).text(left);
 $(#top).text(top);
 $(#scale).text(scale);
 $(#rotate).text(rotate);
 $targetObj.css({
 left: left,
 top: top,
 transform: scale( + scale + ) rotate( + rotate + deg),
 -webkit-transform: scale( + scale + ) rotate( + rotate + deg)
 });
 });
 //初始化拖动手势（不需要就注释掉）
 cat.touchjs.drag($targetObj, function (left, top) {
 $(#left).text(left);
 $(#top).text(top);
 });
 //初始化缩放手势（不需要就注释掉）
 cat.touchjs.scale($targetObj, function (scale) {
 $(#scale).text(scale);
 });
 //初始化旋转手势（不需要就注释掉）
// cat.touchjs.rotate($targetObj, function (rotate) {
// $(#rotate).text(rotate);
// });
 });
 


 /script 
 /body 
 /html 

//预览地址
http://wxserver.knowway.cn/home/moban/touchujs.html

ps:切记初始化500毫秒后 再操作

18843.html