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

最新推荐文章于 2020-12-25 15:39:28 发布

「已注销」

最新推荐文章于 2020-12-25 15:39:28 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/oMiracle123/article/details/78342229

版权

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




    touch.js demo
    
  
  
    
  
  
    <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>


    
  
  
        
   
   
            
    
    
        
   
   
        
   
   left：0
top：0
scale：1
rotate：0
        
   
   
            
    
    
            
    
    
        
   
   
    
  
  
    <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>




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

查看原文：http://newmiracle.cn/?p=2150