mwbr.net
当前位置:首页 >> jquEry实现手机端网页中图片两指缩放,旋转的功能... >>

jquEry实现手机端网页中图片两指缩放,旋转的功能...

这个貌似HTML5教程里就有啊

百度有个touch.js,支持各种手势,包括缩放pinch事件,pinchin是缩小,pinchout是放大。

浏览的话,lightbox,colorbox 缩放和旋转的话,rapheal,rotate.js 目前没找到同时支持浏览,缩放,旋转的插件,需要自己结合这些东西实现

这个现在可以用css3来完成来;transform:rotate(90deg)旋转90度transform:scale(1.2);放大1.2倍

Documentwindow.onload = function(){var current = 0;document.getElementById('target').onclick = function(){current = (current+90)%360;this.style.transform = 'rotate('+current+'deg)';}};

그림 같은 수 있도록, div 자유 드래그, 확대, 축소, 회전 플러그인 이름이 ...

下面是用css旋转图片,用js换className。 换图片地址后试试。 .css-turn-0{ -moz-transform:matrix(1,0,0,1,0,0); -o-transform:matrix(1,0,0,1,0,0); -webkit-transform:matrix(1,0,0,1,0,0); transform:matrix(1,0,0,1,0,0); -ms-filter:"prog...

实施我这个,测试时可以运行的 var num = 0; $("#input2").click(function(){ num ++; $("#img1").rotate(45*num); });

Test var current = 0;function tranImg(trun){var imgObj= document.getElementById('imgTest');current = (current+trun)%360;imgObj.style.transform = 'rotate('+current+'deg)';}

#div1 { width: 800px; height: 600px; background-color: #ff0; position: absolute; } .imgRotate { width: 100px; height: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -50px; } var num = 0; $("#input2").click(fu...

网站首页 | 网站地图
All rights reserved Powered by www.mwbr.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com