セレクションボックスのプロポーショナルドラッグとズーム方法のJavaScript実装の詳細説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

セレクションボックスのプロポーショナルドラッグとズーム方法のJavaScript実装の詳細説明

巴扎黑

Sep 06, 2017 am 10:34 AM

javascriptjs

本文实例讲述了JavaScript实现选择框按比例拖拉缩放的方法。分享给大家供大家参考。具体如下：

这里通过javascript实现可以像PS一样拉出一个选择框的效果。里面的很多方法都是我们值得学习的。

运行效果如下图所示：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript拖拉缩放效果</title>
</head>
<body>
<script>
var isIE = (document.all) ? true : false;
var $ = function (id) {
  return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
  create: function() {
    return function() { this.initialize.apply(this, arguments); }
  }
}
var Extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
}
var Bind = function(object, fun) {
  return function() {
    return fun.apply(object, arguments);
  }
}
var BindAsEventListener = function(object, fun) {
  var args = Array.prototype.slice.call(arguments).slice(2);
  return function(event) {
    return fun.apply(object, [event || window.event].concat(args));
  }
}
var CurrentStyle = function(element){
  return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
function addEventHandler(oTarget, sEventType, fnHandler) {
  if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);
  } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);
  } else {
    oTarget["on" + sEventType] = fnHandler;
  }
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.removeEventListener) {
  oTarget.removeEventListener(sEventType, fnHandler, false);
 } else if (oTarget.detachEvent) {
  oTarget.detachEvent("on" + sEventType, fnHandler);
 } else { 
  oTarget["on" + sEventType] = null;
 }
};
//缩放程序
var Resize = Class.create();
Resize.prototype = {
//缩放对象
initialize: function(obj, options) {
  this._obj = $(obj);//缩放对象  
  this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//样式参数
  this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0;//坐标参数
  this._fixLeft = this._fixTop = 0;//定位参数
  this._scaleLeft = this._scaleTop = 0;//定位坐标
  this._mxSet = function(){};//范围设置程序
  this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0;//范围参数
  this._mxScaleWidth = this._mxScaleHeight = 0;//比例范围参数
  this._fun = function(){};//缩放执行程序
  //获取边框宽度
  var _style = CurrentStyle(this._obj);
  this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0);
  this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0);
  //事件对象(用于绑定移除事件)
  this._fR = BindAsEventListener(this, this.Resize);
  this._fS = Bind(this, this.Stop);
  this.SetOptions(options);
  //范围限制
  this.Max = !!this.options.Max;
  this._mxContainer = $(this.options.mxContainer) || null;
  this.mxLeft = Math.round(this.options.mxLeft);
  this.mxRight = Math.round(this.options.mxRight);
  this.mxTop = Math.round(this.options.mxTop);
  this.mxBottom = Math.round(this.options.mxBottom);
  //宽高限制
  this.Min = !!this.options.Min;
  this.minWidth = Math.round(this.options.minWidth);
  this.minHeight = Math.round(this.options.minHeight);
  //按比例缩放
  this.Scale = !!this.options.Scale;
  this.Ratio = Math.max(this.options.Ratio, 0);
  this.onResize = this.options.onResize;
  this._obj.style.position = "absolute";
  !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
 },
 //设置默认属性
 SetOptions: function(options) {
 this.options = {//默认值
    Max:    false,//是否设置范围限制(为true时下面mx参数有用)
    mxContainer:"",//指定限制在容器内
    mxLeft:    0,//左边限制
    mxRight:  9999,//右边限制
    mxTop:    0,//上边限制
    mxBottom:  9999,//下边限制
    Min:    false,//是否最小宽高限制(为true时下面min参数有用)
    minWidth:  50,//最小宽度
    minHeight:  50,//最小高度
    Scale:    false,//是否按比例缩放
    Ratio:    0,//缩放比例(宽/高)
    onResize:  function(){}//缩放时执行
 };
 Extend(this.options, options || {});
 },
 //设置触发对象
 Set: function(resize, side) {
  var resize = $(resize), fun;
  if(!resize) return;
  //根据方向设置
  switch (side.toLowerCase()) {
  case "up" :
    fun = this.Up;
    break;
  case "down" :
    fun = this.Down;
    break;
  case "left" :
    fun = this.Left;
    break;
  case "right" :
    fun = this.Right;
    break;
  case "left-up" :
    fun = this.LeftUp;
    break;
  case "right-up" :
    fun = this.RightUp;
    break;
  case "left-down" :
    fun = this.LeftDown;
    break;
  case "right-down" :
  default :
    fun = this.RightDown;
  };
  //设置触发对象
  addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start, fun));
 },
 //准备缩放
 Start: function(e, fun, touch) {  
  //防止冒泡(跟拖放配合时设置)
  e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
  //设置执行程序
  this._fun = fun;
  //样式参数值
  this._styleWidth = this._obj.clientWidth;
  this._styleHeight = this._obj.clientHeight;
  this._styleLeft = this._obj.offsetLeft;
  this._styleTop = this._obj.offsetTop;
  //四条边定位坐标
  this._sideLeft = e.clientX - this._styleWidth;
  this._sideRight = e.clientX + this._styleWidth;
  this._sideUp = e.clientY - this._styleHeight;
  this._sideDown = e.clientY + this._styleHeight;
  //top和left定位参数
  this._fixLeft = this._styleLeft + this._styleWidth;
  this._fixTop = this._styleTop + this._styleHeight;
  //缩放比例
  if(this.Scale){
    //设置比例
    this.Ratio = Math.max(this.Ratio, 0) || this._styleWidth / this._styleHeight;
    //left和top的定位坐标
    this._scaleLeft = this._styleLeft + this._styleWidth / 2;
    this._scaleTop = this._styleTop + this._styleHeight / 2;
  };
  //范围限制
  if(this.Max){
    //设置范围参数
    var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
    //如果设置了容器，再修正范围参数
    if(!!this._mxContainer){
      mxLeft = Math.max(mxLeft, 0);
      mxTop = Math.max(mxTop, 0);
      mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
      mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
    };
    //根据最小值再修正
    mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX);
    mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY);
    //由于转向时要重新设置所以写成function形式
    this._mxSet = function(){
      this._mxRightWidth = mxRight - this._styleLeft - this._borderX;
      this._mxDownHeight = mxBottom - this._styleTop - this._borderY;
      this._mxUpHeight = Math.max(this._fixTop - mxTop, this.Min ? this.minHeight : 0);
      this._mxLeftWidth = Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth : 0);
    };
    this._mxSet();
    //有缩放比例下的范围限制
    if(this.Scale){
      this._mxScaleWidth = Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft - this._borderX) * 2;
      this._mxScaleHeight = Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop - this._borderY) * 2;
    };
  };
  //mousemove时缩放 mouseup时停止
  addEventHandler(document, "mousemove", this._fR);
  addEventHandler(document, "mouseup", this._fS);
  if(isIE){
    addEventHandler(this._obj, "losecapture", this._fS);
    this._obj.setCapture();
  }else{
    addEventHandler(window, "blur", this._fS);
    e.preventDefault();
  };
 },
 //缩放
 Resize: function(e) {
  //清除选择
  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  //执行缩放程序
  this._fun(e);
  //设置样式，变量必须大于等于0否则ie出错
  with(this._obj.style){
    width = this._styleWidth + "px"; height = this._styleHeight + "px";
    top = this._styleTop + "px"; left = this._styleLeft + "px";
  }
  //附加程序
  this.onResize();
 },
 //缩放程序
 //上
 Up: function(e) {
  this.RepairY(this._sideDown - e.clientY, this._mxUpHeight);
  this.RepairTop();
  this.TurnDown(this.Down);
 },
 //下
 Down: function(e) {
  this.RepairY(e.clientY - this._sideUp, this._mxDownHeight);
  this.TurnUp(this.Up);
 },
 //右
 Right: function(e) {
  this.RepairX(e.

以上がセレクションボックスのプロポーショナルドラッグとズーム方法のJavaScript実装の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles