网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
内容
    这篇文章主要介绍了jQuery自定义图片缩放拖拽插件imageQ实现方法,涉及jQuery扩展操作及页面元素操作技巧,并附带了完整的demo源码供读者下载参考,需要的朋友可以参考下
    本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法。分享给大家供大家参考，具体如下：
    综合网上一些代码 自己写的一个图片缩放拖拽的小插件
    /**
     *
     * <a href="http://lib.csdn.net/base/22" class='replace_word' target='_blank' style='color:#df3434; font-weight:bold;'>jQuery</a> imageQ plugin
     * @name jquery-imageQ.js
     * @author Q
     * @date 2011-01-19
     * maxRatio 最大放大比例
     * minRatio 最小缩小比例
     * changeRadio 每次变化幅度
     * picUrl:图片地址,
     * picWidth:图片宽度,
     * picHeight:图片高度,
     * reset:是否重设图片
     *
     */
    (function($){
      var status = false;
      $.fn.imageQ = function(options){
        var defaults = {
          maxRatio:4,
          minRatio:4,
          changeRadio:0.2,
          picUrl:'',
          picWidth:306,
          picHeight:372,
          reset:false
        }
        var options=jQuery.extend(defaults,options);
        return this.each(function(){
          status = true;
          $(this).attr('src','');
          $(this).attr('src',options.picUrl);
          var naturalwidth = options.picWidth;
          var naturalheight = options.picHeight;
          var minwidth = Math.round(naturalwidth/options.minRatio);
          var minheight = Math.round(naturalheight/options.minRatio);
          var maxwidth = Math.round(naturalwidth*options.maxRatio);
          var maxheight = Math.round(naturalheight*options.maxRatio);
          if(options.reset)
          {
            $("#wrapDiv").css("width",naturalwidth+"px");
            $("#wrapDiv").css("height",naturalheight+"px");
            $("#wrapDiv").css("top",'0px');
            $("#wrapDiv").css("left",'0px');
          }
          else
          {
            $(this).css("width","100%");
            $(this).css("height","100%");
            $(this).wrap("<div id='wrapDiv' style='-moz-user-select: none;width:"+naturalwidth+"px;height:"+naturalheight+"px;cursor:move;position:relative;top:0px;left:0px;visibility: visible;' ondragstart='return false;' onselectstart='return false;'></div>");
            $("#wrapDiv").before('<div><div id="plusTool"></div><div id="minusTool"></div><div id="moveTool"></div></div>');
            //$("#wrapDiv").append('<div id="uploaduserpng"></div>');
            $("#plusTool").attr('title','放大');
            $("#minusTool").attr('title','缩小');
            $("#moveTool").attr('title','拖动');
            $("#plusTool").bind("click",function(){
              _changeOperate('plus');
            });
            $("#minusTool").bind("click",function(){
              _changeOperate('minus');
            });
            $("#moveTool").bind("click",function(){
              _changeOperate('move');
            });
            function plusOperate()
            {
              $("#wrapDiv").unbind();
              $("#wrapDiv").unbind();
              $("#wrapDiv").bind("click",function(){
                  var h = $("#wrapDiv").height();
                  var w = $("#wrapDiv").width();
                  if(Math.round(h*(1+options.changeRadio)) >= maxheight)
                  {
                    var newH = maxheight;
                  }
                  else
                  {
                    var newH = Math.round(h*(1+options.changeRadio));
                  }
                  if(Math.round(w*(1+options.changeRadio)) >= maxwidth)
                  {
                    var newW = maxwidth;
                  }
                  else
                  {
                    var newW = Math.round(w*(1+options.changeRadio));
                  }
                  $("#wrapDiv").css("width",newW+"px");
                  $("#wrapDiv").css("height",newH+"px");
                });
            }
            function minusOperate()
            {
              $("#wrapDiv").unbind();
              $("#wrapDiv").unbind();
              $("#wrapDiv").bind("click",function(){
                  var h = $("#wrapDiv").height();
                  var w = $("#wrapDiv").width();
                  if(Math.round(h*(1-options.changeRadio)) <= minheight)
                  {
                    var newH = minheight;
                  }
                  else
                  {
                    var newH = Math.round(h*(1-options.changeRadio));
                  }
                  if(Math.round(w*(1-options.changeRadio)) <= minwidth)
                  {
                    var newW = minwidth;
                  }
                  else
                  {
                    var newW = Math.round(w*(1-options.changeRadio));
                  }
                  $("#wrapDiv").css("width",newW+"px");
                  $("#wrapDiv").css("height",newH+"px");
                });
            }
            function moveOperate()
            {
              $("#wrapDiv").unbind();
              var _move = false;
              var _x,_y;
              $("#wrapDiv").bind("mousedown",function(e){
                _setCursor('grabbing');
                _move = true;
                if(!document.all)
                {
                  _x = e.pageX - parseInt($("#wrapDiv").css("left"));
                  _y = e.pageY - parseInt($("#wrapDiv").css("top"));
                }
                else
                {
                  var pagex = e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
                  var pagey = e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
                  _x = pagex - parseInt($("#wrapDiv").css("left"));
                  _y = pagey - parseInt($("#wrapDiv").css("top"));
                }
              });
              $("#wrapDiv").bind("mouseup",function(e){
                _setCursor('grab');
                _move = false;
              });
              $("#wrapDiv").bind("mousemove",function(e){
                if(_move)
                {
                  if(!document.all)
                  {
                    var pagex = e.pageX;
                    var pagey = e.pageY;
                  }
                  else
                  {
                    var pagex = e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
                    var pagey = e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
                  }
                  var x = pagex-_x;
                  var y = pagey-_y;
                  $("#wrapDiv").css("top",y);
                  $("#wrapDiv").css("left",x);
                }
              });
            }
            function _setCursor(type){
              $("#wrapDiv").css("cursor","url('images/cursors/"+type+".cur'),default");
            }
            function _changeOperate(operate)
            {
              if(operate == 'plus')
              {
                _setCursor('zoom-in');
                plusOperate();
              }
              if(operate == 'minus')
              {
                _setCursor('zoom-out');
                minusOperate();
              }
              if(operate == 'move')
              {
                _setCursor('grab');
                moveOperate();
              }
            }
          }
        });
      };
      $.fn.imageQ.getStatus = function()
      {
        return status;
      };
    })(jQuery);
    希望本文所述对大家jQuery程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 0:37:41