`

js的缩放和拖动

阅读更多

学习了 cloudgamer  写的拖动和缩放效果,呵呵,受益匪浅。

所以自己也就研究了一下,需要学习的地方很多了。

 

一,

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));
	}
}

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;
    }

 通过上面的方法,在使用2级事件注册时,传入自己的参数。

addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start,fun )  );

然后自己小小的修改了下BindAsEventListener方法

var BindAsEventListener_my = function(object, fun) {
	var args = Array.prototype.slice.call(arguments).slice(2);
	return function() {
		return fun.apply(object, [arguments[0] || window.event].concat(args));
	}
}

 这几个方都是兼容IE和FF的。

 

二,

防止冒泡

function(e) {
	//防止冒泡	
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
}

 清除选,在拖动时,可以防止ondrag

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

 

三,还有很多很多……

 

 

 

 

 

 

分享到:
评论

相关推荐

    svg 支持缩放和拖动DEMO

    总的来说,SVG的缩放和拖动功能是通过结合CSS3的transform属性和JavaScript的事件处理来实现的,这为创建交互式的SVG图形提供了强大的工具。通过深入理解这些技术,开发者能够构建出更加生动和用户友好的Web应用程序...

    js实现图片缩放与拖动

    在JavaScript中实现图片的缩放和拖动功能是一项常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何使用JavaScript实现这一功能,并提供一个基础实例。 首先,我们需要理解图片缩放和拖动的基本原理。...

    Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)

    Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题),大屏项目显示云南省3D的地图,可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...

    jq图片缩放与拖动

    4. **坐标计算**:在实现拖动和缩放功能时,需要进行坐标计算,确定鼠标相对于图片的位置,以及图片新的尺寸和位置。这些计算通常涉及到相对坐标转换和边界检查,以确保图片不会超出容器范围。 5. **动画效果**:...

    js拖动和缩放DIV代码

    在本主题中,我们将深入探讨如何使用JavaScript实现对DIV元素的拖动和缩放操作。 首先,让我们理解一下什么是DIV。在HTML中,`<div>` 是一个通用的容器元素,可以用来组合其他HTML元素,对其进行样式化,或者通过...

    微信小程序 图片缩放拖动

    在JS文件中,我们需要监听用户的触摸事件,如`touchstart`、`touchmove`和`touchend`,来获取手指在屏幕上的移动和缩放信息。例如: ```javascript Page({ data: { imgScale: 1, // 初始缩放比例 imgTranslateX:...

    js图片拖动缩放效果大全 类似于地图功能

    各种js地图拖动和缩放效果以及图片拖动效果显示 共享给大家 共同进步

    javascript图片预览(滚动放大缩小和拖动查看)

    此外,可能还需要一个包含图片的容器元素,如`<div>`,以便进行拖动和缩放操作。 `index.css`是CSS样式表,用于定义页面布局和元素样式。在这个案例中,可能包括了图片容器的宽高、定位以及拖动和缩放时的过渡效果...

    可缩放、拖动、自适应布局组件demo

    "可缩放、拖动、自适应布局组件demo"是一个专为实现这种功能而设计的示例项目,它允许用户通过拖动和缩放操作来自由调整界面元素的位置和大小,同时还能根据屏幕尺寸自适应布局。这样的组件在构建复杂且灵活的Web...

    页面中图片缩放拖动

    总结,实现“页面中图片缩放拖动”涉及的技术包括CSS3的`transform`属性、JavaScript事件处理和矩阵运算。在实际开发中,可以结合库如jQuery、Vue.js或React等框架来简化代码并优化性能。文件“图片拖动效果”可能...

    地图的缩放,拖动,旋转

    总结来说,地图的缩放、拖动和旋转是地图应用中的基本交互操作,实现这些功能需要对图形编程、坐标转换和用户交互有深入理解。在VC++环境下,开发者可以借助图形库和地图库,结合自己的编程技巧,创建出具有丰富交互...

    可旋转缩放和拖动的图片查看jquery插件

    可旋转缩放和拖动的图片查看jquery插件,完全原创,支持火狐和谷歌浏览器。

    一个反应组件,提供多点触控手势,用于在任何DOM元素上进行缩放和拖动_JavaScript_TypeScript_下载.zip

    在这个组件中,JavaScript被用来处理用户的触控事件,检测和解析捏合和拖动手势,并更新DOM元素的样式以实现缩放和拖动效果。 4. **TypeScript**:TypeScript是JavaScript的一个超集,增加了静态类型系统和一些面向...

    js图片查看器。鼠标拖动图片任意方向旋转,鼠标滚动滚轮缩放,任意角度翻转。

    JavaScript图片查看器是一种利用JavaScript编程语言实现的网页图像浏览工具,它赋予用户在网页上对图片进行多种操作的能力,如旋转、缩放和翻转等。这种技术通常用于提高用户体验,使得用户在查看图片时能够有更丰富...

    html js控制svg图片的缩放拖动可运行精品实例

    在本实例中,"html js控制svg图片的缩放拖动可运行精品实例"展示了如何利用JavaScript来实现SVG元素的动态操作。 首先,我们需要创建一个SVG容器,并设置其初始大小。这可以通过CSS或内联样式完成。例如: ```html...

    svg移动+缩放+拖动添加+事件

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许在网页上创建和展示复杂的图形。...在实际项目中,这些功能通常需要结合CSS和JavaScript库(如d3.js)进行更复杂的应用和优化。

    SVG整体缩放拖动创建元素.rar

    这个文件可能是用户自定义的SVG工作脚本,用于结合`svgpanzoom.js`实现特定的SVG操作,比如创建、删除或修改SVG元素,或者自定义拖动和缩放行为。 通过这个压缩包的学习,你可以掌握SVG的基本操作和高级交互技术,...

    非常不错的地图打点,缩放,拖动工具

    标题提到的“非常不错的地图打点,缩放,拖动工具”可能是一个轻量级且易用的JavaScript库或者Web应用程序,它提供了无需额外安装控件即可在网页上实现地图交互的能力。 地图打点是将特定位置以标记(通常是一个...

Global site tag (gtag.js) - Google Analytics