javascript 绘制矩形框- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 绘制矩形框

Javascript: 一个可以兼容IE FF的加为首页与加入收藏实现代码; javascript(jquery)利用函数修改全局变量的代码; JQuery 解析多维的Json数据格式; javascript 按回车键相应按钮提交事件; 深入认识javascript中的eval函数; jquery tree 可编辑节点实现代码(jquery一句话节点菜单); js window.onload 加载多个函数的方法; MAC官方菜单纯CSS实现灰色会换色; CSS Filter背景透明提示; CSS鼠标悬停菜单图片交换技术实现; 纯JS图片批量预加载技术代码; 实用的层滑开js实现代码; jQuery get和post 方法传值注意事项; JQuery打造PHP的AJAX表单提交实例; Jquery AJAX 框架的使用方法; 基于JQuery框架的AJAX实例代码; jquery ajax 检测用户注册时用户名是否存在; javascript 限制输入脚本大全; JavaScript window.setTimeout() 的详细用法; JavaScript 表格高亮类的应用[高级]

No. « ‹ 270 271 272 273 › »

技术文章搜索

关键字

Javascript 中的 javascript 绘制矩形框

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 338 ::

收藏到网摘: n/a

使用自定义setTimeout和setInterval使之可以传递参数和对象参数纯JS 绘制数学函数

今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单如果不考虑把整个代码封装起来，大约5分钟里也可以写出类似的效果，为了把整个代码封装成一个对象，稍微借鉴了Pro Javascript Techniques书中的代例子的风格。
Pro Javascript Techniques书中推荐的drag and drop 例子：http://boring.youngpup.net/2001/domdrag

点击运行可以看到效果:

<html>
<head>
<title>Rect</title>
<style type="text/css">
</style>
<script type="text/javascript">
var Rect = { //当前正在画的矩形对象
obj: null,
//画布
container: null,
//初始化函数
init: function(containerId){
Rect.container = document.getElementById(containerId);
if(Rect.container){ //鼠标按下时开始画
Rect.container.onmousedown = Rect.start;
}
else{
alert('You should specify a valid container!');
}
},
start: function(e){
var o = Rect.obj = document.createElement('div');
o.style.position = "absolute";
// mouseBeginX，mouseBeginY是辅助变量，记录下鼠标按下时的位置
o.style.left = o.mouseBeginX = Rect.getEvent(e).x;
o.style.top = o.mouseBeginY = Rect.getEvent(e).y;
o.style.height = 0;
o.style.width = 0;
o.style.border = "dotted black 1px";
//向o添加一个叉叉，点击叉叉可以删除这个矩形
var deleteLink = document.createElement('a');
deleteLink.href="#";
deleteLink.onclick = function(){ Rect.container.removeChild(this.parentNode); //this.parentNode.style.display = "none"; //alert(this.tagName);
}
deleteLink.innerText = "x";
o.appendChild(deleteLink);
//把当前画出的对象加入到画布中
Rect.container.appendChild(o);
//处理onmousemove事件
Rect.container.onmousemove = Rect.move;
//处理onmouseup事件
Rect.container.onmouseup = Rect.end;
},
move: function(e){
var o = Rect.obj;
//dx，dy是鼠标移动的距离
var dx = Rect.getEvent(e).x - o.mouseBeginX;
var dy = Rect.getEvent(e).y - o.mouseBeginY;
//如果dx，dy <0,说明鼠标朝左上角移动，需要做特别的处理
if(dx<0){
o.style.left = Rect.getEvent(e).x;
}
if(dy<0){
o.style.top = Rect.getEvent(e).y;
}
o.style.height = Math.abs(dy);
o.style.width = Math.abs(dx);
},
end: function(e){ //onmouseup时释放onmousemove，onmouseup事件句柄
Rect.container.onmousemove = null;
Rect.container.onmouseup = null;
Rect.obj = null;
},
//辅助方法，处理IE和FF不同的事件模型
getEvent: function(e){ if (typeof e == 'undefined'){ e = window.event; } //alert(e.x?e.x : e.layerX); if(typeof e.x == 'undefined'){ e.x = e.layerX; } if(typeof e.y == 'undefined'){ e.y = e.layerY; } return e; }
}; </script>
</head>
<body>
<div id="main" style="border: solid red 1px; height:90%; width:60%; curssor: default;"></div>
增加一个按钮，可以关闭绘画效果，用来配合测试删除功能
<input type="button" value="停止绘画" id="t"/>
</body>
<script type="text/javascript">
//测试代码开始
//初始化
Rect.init("main");
document.getElementById('t').onclick = function(){ Rect.container.onmousedown = null;
}; </script>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

使用自定义setTimeout和setInterval使之可以传递参数和对象参数纯JS 绘制数学函数

Javascript 中的 javascript 绘制矩形框

评论 (0) All