没事无聊,突然发现在windows下面一个很平常的细节,而在ie上没有,现在ria大行其道,很多web应用都在积极的效仿类windows的桌面效果,ext.dojo等等js类库中间都有很多绚丽的widget,很多人都认为js是一门玩具语言,很大一部分原因是他的
语言的自由,不同的程序员能写出不同的风格,还有就是js没有属于自己的图形类库(canvas至少没有普及和成熟),要画图,我们需要采用adobe的flash以及sun applet等等,不过,在浏览器,依旧,js的地位不可替代;
本来就是一个小小的demo,没多少价值含量,js也不是我的专长,不过要写好js,个人认为不是实现多少特效,而是要充分考虑到性能和机制,闭包,new function的时候做个什么,this是什么,js的对象是什么,类是什么,都值得我们研究,废话不说,小小的demo给出,希望能帮到初学者;
windows下面的效果:
我们可以用鼠标拖拽出一个半透明的淡蓝色框框,大小随鼠标移动;
用js实现,代码如下:
- <html>
- <head>
- <title>
- dashedBox
- </title>
- </head>
- <script language="javascript">
- <!--
- var beginX;
- var beginY;
- var drawable;
- function beforeDrawDashedBox(){
- drawable=true;
- beginX=event.clientX;
- beginY=event.clientY;
- //alert("before");
- }
- function getDashedBox(){
- var dashedBox=document.getElementById("dashedBox");
- return dashedBox;
- }
- function clearDashedBox(){
- if(getDashedBox()!=null){
- document.body.removeChild(getDashedBox());
- }
- }
- function drawBox(top,right,buttom,left){
- var relLeft=left<right?left:right;
- var relTop=top<buttom?top:buttom;
- var relWidth=Math.abs(right-left);
- var relHeight=Math.abs(buttom-top);
- var divEl=document.createElement("div");
- divEl.id="dashedBox";
- divEl.style.position="absolute";
- divEl.style.border="1px BLUE dashed";
- divEl.style.left=relLeft;
- divEl.style.backgroundColor="blue";
- divEl.style.filter="alpha(opacity=10)";
- divEl.style.top=relTop;
- divEl.style.width=relWidth;
- divEl.style.height=relHeight;
- document.body.appendChild(divEl);
- }
- function inDrawDashedBox(){
- if(drawable==true){
- clearDashedBox();
- drawBox(beginY,beginX,event.clientY,event.clientX);
- // alert("in");
- }
- }
- function afterDrawDashedBox(){
- drawable=false;
- clearDashedBox();
- // alert("after");
- }
- function loadDashdBoxFn (){
- document.οnmοusedοwn=beforeDrawDashedBox;
- document.οnmοusemοve=inDrawDashedBox;
- document.οnmοuseup=afterDrawDashedBox;
- }
- window.οnlοad=loadDashdBoxFn;
- </script>
- <body>
- </body>
- </html>
ie浏览器下效果如图:
很遗憾,因为随手写的,暂时只支持ie,firefox下面不支持,跨浏览器是js的痛啊!