基于rapheal图片放大缩小旋转拖拽双击

最新推荐文章于 2020-07-21 19:41:43 发布

画夜

最新推荐文章于 2020-07-21 19:41:43 发布

阅读量987

点赞数

分类专栏：效果前端

本文链接：https://blog.csdn.net/zsr_251/article/details/50073129

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

效果

3 篇文章 0 订阅

订阅专栏

rapheal中文api：http://html5css3webapp.com/raphaelApi.htm

Raphael Javascript 是一个 Javascript的矢量库。

英文原版官网：http://raphaeljs.com

英文原版文档：http://raphaeljs.com/reference.html

rapheal这个玩意儿可以实现很多很负载的功能，这次只用到了图片的简单处理，再此记录

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>demo</title>
        <link rel="stylesheet" href="demo.css" media="screen">
        <script src="raphael-min.js"></script>
        <script src="jquery.js"></script>
        <style media="screen">
            body {
                background: #333;
            }
        </style>
    </head>
    <body>
        <div id="holder" width="100%" >
          <div style="position:fixed;bottom:0px;"><button id="load">Load</button><button id="max">Enlargement</button><button id="min">Reduction</button><button id="left">Left</button><button id="right">Right</button></div>
          <img id="photo" src="demo.png" style='display:none'/>
        </div>
        
        <script type="text/javascript">
        var paper;
        var image;
        var image_width=0;
        var image_height=0;
        var image_x;
        var image_y;
         $(function () {
          paper = Raphael("holder", 800, 800);  
          dragImg=function(dx,dy,x,y,event){
          image.animate({x:dx+image_x,y:dy+image_y});
         }
        });
        </script>
        <script type="text/javascript">
        $("#load").click(function(){  
            if(image){ image.unhover();image.undblclick();image.remove();}
            paper.clear();
            image_width=$("#photo").width();
            image_height=$("#photo").height();
            image = paper.image("demo.png", 50, 50, image_width, image_height);
            //鼠标显示
            image.attr('cursor','pointer');
            //拖拽事件
            image.drag(dragImg,function(x,y){image_x=image.attr("x");image_y=image.attr("y");});
            //双击事件
            image.dblclick(function(){image.scale(1.25,1.25)});
        });
        //点击缩小按钮
         $("#min").mousedown(function(){ 
          if(!image) return;
            interval = setInterval(function() {  
               image.scale(0.95,0.95);
            }, 100);  
          });
          $("#min").mouseup(function(){ 
          if(!image) return;
            clearInterval(interval);  
          });
          //点击放大按钮
          $("#max").mousedown(function(){ 
          if(!image) return;
            interval = setInterval(function() {  
               image.scale(1.05,1.05);
            }, 100);  
          });
          $("#max").mouseup(function(){ 
          if(!image) return;
            clearInterval(interval);  
          });
          //点击左转按钮
          $("#left").mousedown(function(){ 
          if(!image) return;
            interval = setInterval(function() {  
                image.rotate(-2); 
            }, 100);  
          });
          $("#left").mouseup(function(){ 
          if(!image) return;
            clearInterval(interval);  
          });
          //点击右转按钮
          $("#right").mousedown(function(){ 
          if(!image) return;
            interval = setInterval(function() {  
                image.rotate(2); 
            }, 100);  
          });
          $("#right").mouseup(function(){ 
          if(!image) return;
            clearInterval(interval);  
          });
      
        </script>
    </body>
</html>

#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}

显示效果：

画夜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于rapheal图片放大缩小旋转拖拽双击

rapheal中文api：http://html5css3webapp.com/raphaelApi.htmRaphael Javascript 是一个 Javascript的矢量库。英文原版官网：http://raphaeljs.com英文原版文档：http://raphaeljs.com/reference.htmlrapheal这个玩意儿可以实现很多很负载的功能，这次只用
复制链接

扫一扫