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 相关文章推荐
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
angularJS深拷贝详解
Mar 23 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
JS动态图片的实现方法完整示例
Jan 13 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
JS支持带x身份证号码验证函数
2008/08/10 Javascript
javascript 写类方式之八
2009/07/05 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
大学新闻系求职信
2014/06/03 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
医院财务人员岗位职责
2015/04/14 职场文书