Rapha?l 鼠标拖动,滚轮缩放js代码

$(window).load(function() {
	var p = Raphael(‘canvas‘);
	p.cx = 0, p.cy = 0, p.cs = 1;
	p.canvas.style.backgroundColor = ‘#008080‘;
	$(window).resize(function() {
		p.setSize($(‘#canvas‘).width(), $(‘#canvas‘).height());
	});
	$(p.canvas).on(‘mousedown‘, function(e) {
		if (e.target == p.canvas) {
			this.ox = e.offsetX;
			this.oy = e.offsetY;
		}
	});
	$(p.canvas).on(‘mousemove‘, function(e) {
		if (e.target == p.canvas && this.ox) {
			var size = p.getSize();
			p.cx = p.cx - (e.offsetX - this.ox) / p.cs;
			p.cy = p.cy - (e.offsetY - this.oy) / p.cs;
			p.setViewBox(p.cx, p.cy, size.width / p.cs, size.height / p.cs);
			this.ox = e.offsetX;
			this.oy = e.offsetY;
		}
	});
	$(p.canvas).on(‘mouseup‘, function(e) {
		if (e.target == p.canvas && this.ox) {
			delete this.ox;
			delete this.oy;
		}
	});
	$(p.canvas).on(‘mousewheel‘, function(e) {
		if (e.target == p.canvas) {
			var size = p.getSize();
			p.cs2 = e.originalEvent.wheelDelta > 0 ? p.cs * 1.125 : p.cs / 1.125;
			p.cx = p.cx + (e.offsetX / p.cs - e.offsetX / p.cs2);
			p.cy = p.cy + (e.offsetY / p.cs - e.offsetY / p.cs2);
			p.cs = p.cs2;
			p.setViewBox(p.cx, p.cy, size.width / p.cs, size.height / p.cs);
		}
		return false;
	});
	for (var i = 0; i < 200; i++) {
		var r = Math.random;
		p.rect(700 * r(), 500 * r(), 100 * r(), 100 * r()).attr(‘fill‘, ‘#00ffff‘);
	}
});
时间: 2024-10-16 06:18:17

Rapha?l 鼠标拖动,滚轮缩放js代码的相关文章

通过鼠标拖动选取指定数字代码实例

通过鼠标拖动选取指定数字代码实例: 在不少的应用中,选取数字的时候可以通过鼠标拖动来实现,这样的效果人性化的很. 下面就分享一个插件实现了这样的功能,这就是jRange,它是利用jQuery实现的. 一.HTML代码部分: 首先载入jQuery库文件以及jRange相关的css文件:jquery.range.css和插件:jquery.range.js. <script src="jquery.js"></script> <link rel="s

鼠标选择文字事件js代码,增加层问题

在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息<script type="text/javascript">document.onmouseup = document.ondbclick= function(){ var txt; if(document.selection){  txt = document.selection.createRange().text }else{  txt = window.

鼠标点击特效js代码

<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?",&

js鼠标拖动图片360度平面旋转

<!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-Typ

Engine中如何实现鼠标滚轮缩放反置?

来自:http://zhihu.esrichina.com.cn/?/question/6666 [解决办法]:1,禁用IMapControl的默认鼠标滚轮事件.即设置IMapControl4.AutoMouseWheel= false:2,重写鼠标滚轮事件.比如在Form1_Load函数中加上this.MouseWheel += new System.Windows.Forms.MouseEventHandler(axMapControl1_OnMouseWheel);然后重写private

js鼠标控制图片的特效,滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {

基于js鼠标拖动图片排序

分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul id="ul1"> <li> <img src="images/1.jpg" width="200" height="150" />&l

正交相机下实现滚轮按钮拖动,滚动滚轮缩放的功能

实现了一个功能,鼠标滚轮键按下可以拖动视野内的物体全体(其实是相机自己在移动),滚动滚轮可以缩放内容(其实是改变相机视野大小) 效果如下 代码奉上 1 using UnityEngine; 2 using UnityEngine.UI; 3 4 /// <summary> 5 /// 挂载在主相机上 6 /// </summary> 7 public class Cont : MonoBehaviour 8 { 9 private new Camera camera; 10 pri

PCB Genesis 鼠标滚轮缩放与TGZ拖放 插件实现

一.背景: 做过CAM的人都用过Geneiss软件,由于处理资料强大,目前奥宝公司出品的Genesis占领整个PCB行业,整个行业无人不知呀, 而此软件有一个吐槽点Genesis 无滚轮缩放与TGZ拖放功,而用过其它图形编辑(CAD,3DMAX,Photoshop,UG)软件,鼠标对图形的操作 是非常的灵活的,确实没有对比就没有伤害,而奥宝这么多年来Genesis升级了N次也没有加入此功能. 正是如此,不得不自行开发此插件功能. <鼠标滚轮缩放>此作品是2014年写使用易语言写的,但有一些坑没