这篇文章主要介绍了 JS 实现鼠标框选效果, 可实现鼠标点击出现框选效果的功能, 同时下方实时显示框选大小, 涉及 javascript 鼠标事件的响应与页面元素的动态运算技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 实现鼠标框选效果的方法。分享给大家供大家参考,具体如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>鼠标框选效果</title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- #bottom{
- position:absolute;
- bottom:0px;
- width:100%;
- height:40px;
- border:1px solid #000;
- background:#000;
- color:#fff;
- }
- .tempDiv{
- border:1px dashed blue;
- background:#5a72f8;
- position:absolute;
- width:0;
- height:0;
- filter:alpha(opacity:10);
- opacity:0.1
- }
- </style>
- <script type = "text/javascript">
- window.onload = function(){
- var stateBar = document.getElementById("bottom");
- document.onmousedown = function(e){
- var posx = e.clientX;
- var posy = e.clientY;
- var div = document.createElement("div");
- div.className = "tempDiv";
- div.style.left = e.clientX+"px";
- div.style.top = e.clientY+"px";
- document.body.appendChild(div);
- document.onmousemove = function(ev){
- div.style.left = Math.min(ev.clientX, posx) + "px";
- div.style.top = Math.min(ev.clientY, posy) + "px";
- div.style.width = Math.abs(posx - ev.clientX)+"px";
- div.style.height = Math.abs(posy - ev.clientY)+"px";
- stateBar.innerHTML = "MouseX: " + ev.clientX + "<br/>MouseY: " + ev.clientY;
- document.onmouseup = function(){
- div.parentNode.removeChild(div);
- document.onmousemove = null;
- document.onmouseup = null;
- }
- }
- }
- }
- </script>
- </head>
- <body>
- <div id = "bottom"></div>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0303/264721.html