学习了 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的缩放和拖动功能是通过结合CSS3的transform属性和JavaScript的事件处理来实现的,这为创建交互式的SVG图形提供了强大的工具。通过深入理解这些技术,开发者能够构建出更加生动和用户友好的Web应用程序...
在JavaScript中实现图片的缩放和拖动功能是一项常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何使用JavaScript实现这一功能,并提供一个基础实例。 首先,我们需要理解图片缩放和拖动的基本原理。...
Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题),大屏项目显示云南省3D的地图,可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...
4. **坐标计算**:在实现拖动和缩放功能时,需要进行坐标计算,确定鼠标相对于图片的位置,以及图片新的尺寸和位置。这些计算通常涉及到相对坐标转换和边界检查,以确保图片不会超出容器范围。 5. **动画效果**:...
在本主题中,我们将深入探讨如何使用JavaScript实现对DIV元素的拖动和缩放操作。 首先,让我们理解一下什么是DIV。在HTML中,`<div>` 是一个通用的容器元素,可以用来组合其他HTML元素,对其进行样式化,或者通过...
在JS文件中,我们需要监听用户的触摸事件,如`touchstart`、`touchmove`和`touchend`,来获取手指在屏幕上的移动和缩放信息。例如: ```javascript Page({ data: { imgScale: 1, // 初始缩放比例 imgTranslateX:...
各种js地图拖动和缩放效果以及图片拖动效果显示 共享给大家 共同进步
此外,可能还需要一个包含图片的容器元素,如`<div>`,以便进行拖动和缩放操作。 `index.css`是CSS样式表,用于定义页面布局和元素样式。在这个案例中,可能包括了图片容器的宽高、定位以及拖动和缩放时的过渡效果...
"可缩放、拖动、自适应布局组件demo"是一个专为实现这种功能而设计的示例项目,它允许用户通过拖动和缩放操作来自由调整界面元素的位置和大小,同时还能根据屏幕尺寸自适应布局。这样的组件在构建复杂且灵活的Web...
总结,实现“页面中图片缩放拖动”涉及的技术包括CSS3的`transform`属性、JavaScript事件处理和矩阵运算。在实际开发中,可以结合库如jQuery、Vue.js或React等框架来简化代码并优化性能。文件“图片拖动效果”可能...
总结来说,地图的缩放、拖动和旋转是地图应用中的基本交互操作,实现这些功能需要对图形编程、坐标转换和用户交互有深入理解。在VC++环境下,开发者可以借助图形库和地图库,结合自己的编程技巧,创建出具有丰富交互...
可旋转缩放和拖动的图片查看jquery插件,完全原创,支持火狐和谷歌浏览器。
在这个组件中,JavaScript被用来处理用户的触控事件,检测和解析捏合和拖动手势,并更新DOM元素的样式以实现缩放和拖动效果。 4. **TypeScript**:TypeScript是JavaScript的一个超集,增加了静态类型系统和一些面向...
JavaScript图片查看器是一种利用JavaScript编程语言实现的网页图像浏览工具,它赋予用户在网页上对图片进行多种操作的能力,如旋转、缩放和翻转等。这种技术通常用于提高用户体验,使得用户在查看图片时能够有更丰富...
在本实例中,"html js控制svg图片的缩放拖动可运行精品实例"展示了如何利用JavaScript来实现SVG元素的动态操作。 首先,我们需要创建一个SVG容器,并设置其初始大小。这可以通过CSS或内联样式完成。例如: ```html...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许在网页上创建和展示复杂的图形。...在实际项目中,这些功能通常需要结合CSS和JavaScript库(如d3.js)进行更复杂的应用和优化。
这个文件可能是用户自定义的SVG工作脚本,用于结合`svgpanzoom.js`实现特定的SVG操作,比如创建、删除或修改SVG元素,或者自定义拖动和缩放行为。 通过这个压缩包的学习,你可以掌握SVG的基本操作和高级交互技术,...
标题提到的“非常不错的地图打点,缩放,拖动工具”可能是一个轻量级且易用的JavaScript库或者Web应用程序,它提供了无需额外安装控件即可在网页上实现地图交互的能力。 地图打点是将特定位置以标记(通常是一个...