touchjs
<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="js/touch.min.js"></script>
<script type="text/javascript" src="js/cat.touchjs.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="padding:20px;">
<div style="position:relative;width: 100%;height: 300px;overflow: hidden;border: 1px dashed #ff0000;">
<img id="targetObj" style="position:relative;transform-origin:center" src="http://demo.somethingwhat.com/images/flower1.jpg" />
</div>
<ul>
<li><span>left：</span><span id="left">0</span></li>
<li><span>top：</span><span id="top">0</span></li>
<li><span>scale：</span><span id="scale">1</span></li>
<li><span>rotate：</span><span id="rotate">0</span></li>
</ul>
<div>
<input type="button" value="保存並刷新" onclick="save()" />
<input type="button" value="重置" onclick="reset()" />
</div>
</div>
<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);
});
});
//保存並刷新
function save() {
var data = {
left: cat.touchjs.left,
top: cat.touchjs.top,
scale: cat.touchjs.scaleVal,
rotate: cat.touchjs.rotateVal
};
//本地存儲
window.localStorage.cat_touchjs_data = JSON.stringify(data);
window.location = window.location;
};
//重置
function reset() {
var data = {
left: 0,
top: 0,
scale: 1,
rotate: 0
};
//本地存儲
window.localStorage.cat_touchjs_data = JSON.stringify(data);
window.location = window.location;
};
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.