用JS模拟Window下的拖选界面.

最新推荐文章于 2024-08-12 10:14:39 发布

wojiaoldm

最新推荐文章于 2024-08-12 10:14:39 发布

阅读量894

点赞数

分类专栏： JS相关文章标签： function generator html filter url

本文链接：https://blog.csdn.net/wojiaoldm/article/details/468550

版权

JS相关专栏收录该内容

0 篇文章 0 订阅

订阅专栏

下面IMG标签中有一个图片,大家可以自己找一个,这个图片就是拖选时的选框.图片最好是方形的,有10个像素就可以了.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.3790.0" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff><IMG id=selectBox
style="BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; DISPLAY: none; Z-INDEX: 500; FILTER: alpha(opacity=50); LEFT: 0px; BORDER-LEFT: blue 1px solid; WIDTH: 0px; BORDER-BOTTOM: blue 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 0px"
src="dragbox_files/box.bmp">
<SCRIPT language=JScript>
document.οnmοusedοwn=foo1;
document.οnmοusemοve=foo2;
document.οnmοuseup=foo3;
var mousedown=false;
var x1,y1,x2,y2;
function foo1(){
mousedown=true;
x1=event.x+document.body.scrollLeft;
y1=event.y+document.body.scrollTop;
}
function foo2(){
x2=event.x+document.body.scrollLeft;
y2=event.y+document.body.scrollTop;
if(mousedown){
selectBox.style.display="";
selectBox.style.width=1;
selectBox.style.height=1;
if(x1<x2&&y1==y2){
selectBox.style.top=y1;
selectBox.style.left=x1;
}
if(x1>x2&&y1==y2){
selectBox.style.top=y1;
selectBox.style.left=x2;
}
if(x1==x2&&y1>y2){
selectBox.style.top=y2;
selectBox.style.left=x1;
}
if(x1==x2&&y1<y2){
selectBox.style.top=y1;
selectBox.style.left=x1;
}
if(x1>x2&&y1>y2){
selectBox.style.top=y2;
selectBox.style.left=x2;
}
if(x1<x2&&y1<y2){
selectBox.style.top=y1;
selectBox.style.left=x1;
}
if(x1<x2&&y1>y2){
selectBox.style.top=y2;
selectBox.style.left=x1;
}
if(x1>x2&&y1<y2){
selectBox.style.top=y1;
selectBox.style.left=x2;
}
selectBox.style.width=Math.abs(x1-x2);
selectBox.style.height=Math.abs(y1-y2);
}
}
function foo3(){
selectBox.style.display="none";
mousedown=false;
}
function avoid(){
event.returnValue=false;
event.cancelBubble=true;
}
document.onselectstart=avoid;
</SCRIPT>

<DIV></DIV> 
 
 </BODY></HTML>

wojiaoldm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS模拟Window下的拖选界面.

下面IMG标签中有一个图片,大家可以自己找一个,这个图片就是拖选时的选框.图片最好是方形的,有10个像素就可以了.style="BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; DISPLAY: none; Z-INDEX: 500; FILTER: alpha(opacity=50); LEFT: 0px; BORDER-LEFT
复制链接

扫一扫