这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
起初是打算兼容 Netscape 和 FireFox 等浏览器的,但这些浏览器中不支持 style.pixelLeft,得使用 style.left 之类的(style.pixelLeft 为数字无单位,style.left 为文本有单位),实际使用中发现效果很不好,有延迟状,所以还是使用 style.pixelLeft,缺点是仅支持 IE 系列浏览器。
[Ctrl+A 全选 注:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>鼠标框选框</title>
- </head>
- <body>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_19/1490194206_5034.jpg" ondrag="javascript:return false;"> <div></div>
- <script language="javascript">
- <!--
- var box = document.getElementById("box");
- var boxWorking = false;
- var startPointX = 0;
- var startPointY = 0;
- //将要移动鼠标,准备鼠标框选框,设置相关数据
- //仅鼠标左键或右键时有效
- //在客户区有效,在滚动条区域无效(滚动条区域属document.body,但不属于document.body的客户区)
- function StartBox()
- {
- //鼠标键判断
- if (event.button!=1 && event.button!=2)
- {
- return;
- }
- //鼠标位置判断
- if (event.clientX>document.body.clientWidth || event.clientY>document.body.clientHeight)
- {
- return;
- }
- startPointX = document.body.scrollLeft + event.clientX;
- startPointY = document.body.scrollTop + event.clientY;
- box.style.pixelLeft = startPointX;
- box.style.pixelTop = startPointY;
- box.style.pixelWidth = 0;
- box.style.pixelHeight = 0;
- box.style.display = "block";
- boxWorking = true;
- }
- //改变鼠标框选框大小
- function ResizeBox()
- {
- //必须要先按下鼠标左键或右键
- if (!boxWorking)
- {
- return;
- }
- var endPointX = document.body.scrollLeft + event.clientX;
- var endPointY = document.body.scrollTop + event.clientY;
- //鼠标左移还是右移
- if (endPointX >= startPointX )
- {
- box.style.pixelLeft = startPointX;
- box.style.pixelWidth = endPointX - startPointX;
- }
- else
- {
- box.style.pixelLeft = endPointX;
- box.style.pixelWidth = startPointX - endPointX;
- }
- //鼠标上移还是下移
- if (endPointY >= startPointY )
- {
- box.style.pixelTop = startPointY;
- box.style.pixelHeight = endPointY - startPointY;
- }
- else
- {
- box.style.pixelTop = endPointY;
- box.style.pixelHeight = startPointY - endPointY;
- }
- }
- //鼠标移动结束,隐藏鼠标框选框,设置相关数据
- //仅鼠标左键或右键时有效
- function EndBox()
- {
- //鼠标键判断
- if (event.button!=1 && event.button!=2)
- {
- return;
- }
- box.style.display = "none";
- boxWorking = false;
- }
- document.body.onmousedown= StartBox;
- document.body.onmousemove = ResizeBox;
- document.body.onmouseup = EndBox;
- //-->
- </script>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]下面这个只在区域内有效
[Ctrl+A 全选 注:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>鼠标框选框</title>
- </head>
- <body>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_6/1490194207_4705.jpg" ondrag="javascript:return false;" width="381" height="354">
- <div></div>
- </div>
- <script language="javascript">
- <!--
- var content = document.getElementById("content");
- var box = document.getElementById("box");
- var boxWorking = false;
- var startPointX = 0;
- var startPointY = 0;
- //将要移动鼠标,准备鼠标框选框,设置相关数据
- //仅鼠标左键或右键时有效
- //在客户区有效,在滚动条区域无效(滚动条区域属document.body,但不属于document.body的客户区)
- function StartBox()
- {
- //鼠标键判断
- if (event.button!=1 && event.button!=2)
- {
- return;
- }
- //鼠标位置判断
- if (event.clientX>document.body.clientWidth || event.clientY>document.body.clientHeight)
- {
- return;
- }
- startPointX = document.body.scrollLeft + event.clientX;
- startPointY = document.body.scrollTop + event.clientY;
- box.style.pixelLeft = startPointX;
- box.style.pixelTop = startPointY;
- box.style.pixelWidth = 0;
- box.style.pixelHeight = 0;
- box.style.display = "block";
- boxWorking = true;
- }
- //改变鼠标框选框大小
- function ResizeBox()
- {
- //必须要先按下鼠标左键或右键
- if (!boxWorking)
- {
- return;
- }
- var endPointX = document.body.scrollLeft + event.clientX;
- var endPointY = document.body.scrollTop + event.clientY;
- //鼠标左移还是右移
- if (endPointX >= startPointX )
- {
- endPointX = (endPointX<=(content.offsetLeft+content.offsetWidth))?endPointX:(content.offsetLeft + content.offsetWidth);
- box.style.pixelLeft = startPointX;
- box.style.pixelWidth = endPointX - startPointX;
- }
- else
- {
- endPointX = (endPointX>=content.offsetLeft)?endPointX:content.offsetLeft;
- box.style.pixelLeft = endPointX;
- box.style.pixelWidth = startPointX - endPointX;
- }
- //鼠标上移还是下移
- if (endPointY >= startPointY )
- {
- endPointY = (endPointY<=(content.offsetTop+content.offsetHeight))?endPointY:(content.offsetTop + content.offsetHeight);
- box.style.pixelTop = startPointY;
- box.style.pixelHeight = endPointY - startPointY;
- }
- else
- {
- endPointY = (endPointY>=content.offsetTop)?endPointY:content.offsetTop;
- box.style.pixelTop = endPointY;
- box.style.pixelHeight = startPointY - endPointY;
- }
- }
- //鼠标移动结束,隐藏鼠标框选框,设置相关数据
- //仅鼠标左键或右键时有效
- function EndBox()
- {
- //鼠标键判断
- if (event.button!=1 && event.button!=2)
- {
- return;
- }
- box.style.display = "none";
- boxWorking = false;
- }
- content.onmousedown= StartBox;
- document.body.onmousemove = ResizeBox;
- document.body.onmouseup = EndBox;
- //-->
- </script>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0422/288976.html