javascript实现淡蓝色的鼠标拖动选择框实例


Posted in Javascript onMay 09, 2015

本文实例讲述了javascript实现淡蓝色的鼠标拖动选择框。分享给大家供大家参考。具体实现方法如下:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rectBox
{
background:#CCFFFF;
border:2px solid #0099FF;
filter:alpha(opacity=30);
opacity:0.3;
position:absolute;
}
</style>
<head>
<title>一个鼠标选择框</title>
<script type="text/javascript">
function Rect()
{
this.doc = document.documentElement;
if(!this.doc) return;
this.startX = '';
this.startY = '';
this.rect = null;
rectSelf = this;
}
Rect.prototype.down = function(e)
{
var e = e?e:window.event;
rectSelf.startX = e.clientX?e.clientX + document.body.scrollLeft:e.pageX;
rectSelf.startY = e.clientY?e.clientY + document.body.scrollTop:e.pageY;
rectSelf.showRect(true);
}
Rect.prototype.up = function(e)
{
rectSelf.rectBox.style.width = '0px';
rectSelf.rectBox.style.height = '0px';
rectSelf.showRect(false);
}
Rect.prototype.move = function(e)
{
if(rectSelf.rectBox)
{
var currentX = e.clientX?e.clientX + rectSelf.doc.scrollLeft:e.pageX;
var currentY = e.clientY?e.clientY + rectSelf.doc.scrollTop:e.pageY;
rectSelf.rectBox.style.width = Math.abs(currentX - rectSelf.startX) + 'px';
rectSelf.rectBox.style.height = Math.abs(currentY - rectSelf.startY) + 'px';
if(currentX - rectSelf.startX < 0)
{
rectSelf.rectBox.style.left = currentX + 'px';
}
if(currentY - rectSelf.startY < 0)
{
rectSelf.rectBox.style.top = currentY + 'px';
}
//document.title = "left:"+currentX + 'px '+"top:"+currentY + 'px ';
}
}
Rect.prototype.showRect = function(bool)
{
if(bool)
{
if(!this.rectBox)
{
this.rectBox = document.createElement("div");
this.rectBox.id = "rectBox";
document.body.appendChild(this.rectBox);
}
this.rectBox.style.display = "block";
this.rectBox.style.left = this.startX + 'px';
this.rectBox.style.top = this.startY + 'px'; 
this.addEventListener(this.doc , 'mousemove' , this.move);
}
else
{
if(this.rectBox)
{
this.rectBox.style.display = "none";
}
this.removeEventListener(this.doc , 'mousemove' , this.move);
}
}
Rect.prototype.addEventListener = function(o,e,l) 
{
if (o.addEventListener) {
o.addEventListener(e,l,false);
} else if (o.attachEvent) {
o.attachEvent('on'+e,function() {
l(window.event);
});
}
}
Rect.prototype.removeEventListener = function(o,e,l) 
{
if (o.removeEventListener) {
o.removeEventListener(e,l,false);
} else if (o.detachEvent) {
o.detachEvent('on'+e,function() {
l(window.event);
});
}
}
window.onload = function()
{
var oRect = new Rect();
oRect.addEventListener(oRect.doc , 'mousedown' , oRect.down);
oRect.addEventListener(oRect.doc , 'mouseup' , oRect.up);
}
</script>
</head>
<body>
<h1>拖动你的鼠标就会出现选择框</h1>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
javasript实现密码的隐藏与显示
May 08 #Javascript
jquery实现动态改变div宽度和高度
May 08 #Javascript
jquery右下角自动弹出可关闭的广告层
May 08 #Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 #Javascript
JavaScript实现自动变换表格边框颜色
May 08 #Javascript
JavaScript基于setTimeout实现计数的方法
May 08 #Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 #Javascript
You might like
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jquery动态添加option示例
2013/12/30 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
常用的js方法合集
2017/03/10 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
我为自己代言广告词
2014/03/18 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
会计求职自荐信
2015/03/26 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
汉字听写大会观后感
2015/06/12 职场文书
行政复议决定书
2015/06/24 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js