这个JS应该怎么改，求助

darkfxux7788 2008-03-04 11:20:37
想把BUTTON部分改成图片连接的A HREF，怎么改呢？
JS部分


var showDiv=Class.create();

var canBeDrag=Class.create();

	window.onload=function()

	{

		

	}

var currnetDiv=0;

showDiv.prototype={

	initialize:function(event,sender,width,heigth,offsetSpeed,backGroupOffset)

	{

		sender.disabled="disabled";

		this.sender=sender;

		this.startTop=event.y

		this.startLeft=event.x

		

		this.width=width;

		this.heigth=heigth;

		this.offsetSpeedWidht=width/offsetSpeed;

		this.offsetSpeedHeight=heigth/offsetSpeed;

		this.backGroupOffset=backGroupOffset;

		this.midTop=768/2-heigth/2;

		this.midLeft=1024/2-width/2;

		

		this.needTime=offsetSpeed;

		this.offsetSpeedTop=(this.midTop-this.startTop)/offsetSpeed;

		this.offsetSpeedLeft=(this.midLeft-this.startLeft)/offsetSpeed;

		this.divid="00";

		this.divbackid;

		this.offsetSpeed=offsetSpeed;

	},

	Show:function()

	{

		var div=document.createElement("div");

		var divback=document.createElement("div");

		var canelButton=document.createElement("button");

		

		div.id=this.sender.id+"_Div";

		divback.id=this.sender.id+"_DivBack";

		canelButton.id=this.sender.id+"_Canel";

		

		div.className="ShowDiv";

		divback.className="ShowDiv";

		

		divback.style.top=this.startTop;

		divback.style.left=this.startLeft;

		divback.style.zIndex=99+currnetDiv++;

		

		div.style.top=this.startTop;

		div.style.left=this.startLeft;

		div.style.zIndex=100+currnetDiv++;

		div.backDiv=divback;

		

		canelButton.senderid=this.sender.id;

		canelButton.divid=div.id;

		canelButton.divbackid=divback.id;

		canelButton.width=this.width;

		canelButton.heigth=this.heigth;

		canelButton.offsetSpeedWidht=this.offsetSpeedWidht;

		canelButton.offsetSpeedHeight=this.offsetSpeedHeight;

		canelButton.offsetSpeedTop=this.offsetSpeedTop;

		canelButton.offsetSpeedLeft=this.offsetSpeedLeft;

		canelButton.backGroupOffset=this.backGroupOffset;

		

		canelButton.startTop=this.startTop;

		canelButton.startLeft=this.startLeft;

		canelButton.offsetSpeed=this.offsetSpeed;

		

		canelButton.value="X";

		canelButton.onclick=function()

		{

			var sender=$(this.senderid);

			sender.disabled="";

			

			this.offsetSpeedTop=(div.offsetTop-this.startTop)/this.offsetSpeed;

			this.offsetSpeedLeft=(div.offsetLeft-this.startLeft)/this.offsetSpeed;

			

			ClearTimeOut(this.divid,this.width,this.heigth,this.offsetSpeedWidht,this.offsetSpeedHeight,this.offsetSpeedTop,this.offsetSpeedLeft,this.backGroupOffset);

			ClearTimeOut(this.divbackid,this.width,this.heigth,this.offsetSpeedWidht,this.offsetSpeedHeight,this.offsetSpeedTop,this.offsetSpeedLeft,this.backGroupOffset);

		};

		div.onfocus=function()

		{

			this.oldZIndex=this.style.zIndex;

			this.backDivZIndex=div.backDiv.style.zIndex;

			div.style.zIndex=9999;

			div.backDiv.style.zIndex=9998;

		};

		div.onblur=function()

		{

			this.style.zIndex=this.oldZIndex;

			div.backDiv.style.zIndex=this.backDivZIndex;

		}

		div.onmousedown=function()

		{

			var div=this;

			var backDiv=this.backDiv;

			var offsetX=event.clientX-div.offsetLeft;

			var offsetY=event.clientY-div.offsetTop;

			var backDivOffestX=event.clientX-backDiv.offsetLeft;

			var backDivOffestY=event.clientY-backDiv.offsetTop;

			document.body.onmousemove=function()

			{

				div.style.left=event.x-offsetX;

				div.style.top=event.y-offsetY;

				backDiv.style.left=event.x-backDivOffestX;

				backDiv.style.top=event.y-backDivOffestY;

			}

		}

		div.onmouseup=function()

		{

			document.body.onmousemove=null;

		}

		

		div.appendChild(canelButton);

	 

		document.body.appendChild(div);

		document.body.appendChild(divback);

		

		SetTimeOut(div.id,this.width,this.heigth,this.offsetSpeedWidht,this.offsetSpeedHeight,this.offsetSpeedTop,this.offsetSpeedLeft,this.backGroupOffset);

		SetTimeOut(divback.id,this.width,this.heigth,this.offsetSpeedWidht,this.offsetSpeedHeight,this.offsetSpeedTop,this.offsetSpeedLeft,this.backGroupOffset);



	}

}

canBeDrag.prototype={

initialize:function(sender)

{

	sender.onmousedown=function()

	{

		var backDiv=this.backDiv;

		var offsetX=event.clientX-sender.offsetLeft;

		var offsetY=event.clientY-sender.offsetTop;

		document.body.onmousemove=function()

		{

			sender.style.left=event.x-offsetX;

			sender.style.top=event.y-offsetY;

		}

	}

	sender.onmouseup=function()

	{

		document.body.onmousemove=null;

		document.body.onmouseup=function()

		{

			document.body.onmousemove=null;

		}

	}

}

}

function ClearTimeOut(divid,width,heigth,offsetSpeedWidht,offsetSpeedHeight,offsetSpeedTop,offsetSpeedLeft,backGroupOffset)

{

	var div=$(divid);

	if(div.offsetWidth>0&&div.offsetHeight>0)

	{

		div.style.width=div.offsetWidth-offsetSpeedWidht+"px";

		div.style.height=div.offsetHeight-offsetSpeedHeight+"px";

		

		div.style.top=parseInt(div.style.top)-offsetSpeedTop+"px";

		div.style.left=parseInt(div.style.left)-offsetSpeedLeft+"px";

		

		var method="ClearTimeOut('"+divid+"',"+width+","+heigth+","+offsetSpeedWidht+","+offsetSpeedHeight+","+offsetSpeedTop+","+offsetSpeedLeft+","+backGroupOffset+")";

		window.setTimeout(method,offsetSpeedWidht);

	}

	else

	{

		document.body.removeChild(div);

	}

}

function SetTimeOut(divid,width,heigth,offsetSpeedWidht,offsetSpeedHeight,offsetSpeedTop,offsetSpeedLeft,backGroupOffset)

{

	var div=$(divid);

	if(div.offsetWidth<width&&div.offsetHeight<heigth)

	{

		div.style.width=div.offsetWidth+offsetSpeedWidht+"px";

		div.style.height=div.offsetHeight+offsetSpeedHeight+"px";

		

		div.style.top=parseInt(div.style.top)+offsetSpeedTop+"px";

		div.style.left=parseInt(div.style.left)+offsetSpeedLeft+"px";

		

		var method="SetTimeOut('"+divid+"',"+width+","+heigth+","+offsetSpeedWidht+","+offsetSpeedHeight+","+offsetSpeedTop+","+offsetSpeedLeft+","+backGroupOffset+")";

		window.setTimeout(method,offsetSpeedWidht);

	}

	else if(divid.indexOf( "_DivBack" )>0)

	{

		div.style.top=parseInt(div.style.top)+backGroupOffset+"px";

		div.style.left=parseInt(div.style.left)+backGroupOffset+"px"

		div.style.backgroundColor="black";

	}

}



function TestShowDiv(event,sender)

{

	var test=new showDiv(event,sender,200,200,20,1);

	test.Show();

}



function initDragControl()

{

	document.body.onselectstart=function(){return false};

	var sender1=$("dragDiv1");

	var sender2=$("dragDiv2");

	var sender3=$("dragDiv3");

	var drag1=new canBeDrag(sender1);

	var drag2=new canBeDrag(sender2);

	var drag3=new canBeDrag(sender3);

	//var cla=new canBeDrag();

	//alert("a");

	//alert(drag1 instanceof showDiv);

	//alert(arguments[0]);

}
...全文
108 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
一把编程的菜刀 2008-03-04
  • 打赏
  • 举报
 回复
图片也可以做按钮的
干吗要这么做吗？？？
直接用图片做按钮
darkfxux7788 2008-03-04
  • 打赏
  • 举报
 回复
那我
<img src="1.jpg" id="Button2" onclick="TestShowDiv(event,this)" style="cursor:hand" />
不是更简单？
会不会造成多个对象产生？
囧 2008-03-04
  • 打赏
  • 举报
 回复 


<input  id="Button2" type="hidden" value="ShowDiv3" onclick="TestShowDiv(event,this)" />

<a href="#" onclick="javascript:TestShowDiv(event, document.getElementById('Button2'));void(0);"><img src='' border='0'></a>


把Button隐藏,用img代替
darkfxux7788 2008-03-04
  • 打赏
  • 举报
 回复
<!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" >
<head id="Head1">
<title>div弹出层</title>
<link href="CSS/ProtoType.css" type="text/css" rel="Stylesheet" />
<script src="JS/prototype.js" type="text/javascript"></script>
<script src="JS/test.js" type="text/javascript"></script>
</head>
<body onload="initDragControl('a')">
<form id="form1">
<div style="background-color:Aqua;position:absolute;text-align:center;width:200px;height:200px;cursor:hand" id="dragDiv1">
<input id="test" type="button" value="ShowDiv1" onclick="TestShowDiv(event,this)" />
<input id="Button1" type="button" value="ShowDiv2" onclick="TestShowDiv(event,this)" />
<input id="Button2" type="button" value="ShowDiv3" onclick="TestShowDiv(event,this)" />
</div>
</form>
</body>
</html>
darkfxux7788 2008-03-04
  • 打赏
  • 举报
 回复 


.MessageSelfIDi

{

	width: 300px;

	height: 40px;

	position: absolute;

	top: 60px;

	left: 60px;

	color: #660000;

	font-size: 12px;

}

.MessageType

{

	width: 328px;

	height: 33px;

	position: absolute;

	top: 96px;

	left: 11px;

	background-image: url(*.jpg);

}

.MessageLeft

{

	width: 11px;

	height: 398px;

	left:0px;

	top:96px;

	background-image: url(*.jpg);

	position:absolute;

}

.MessageRight

{

	width: 11px;

	height: 398px;

	left:339px;

	top:96px;

	background-image: url(*.jpg);

	position:absolute;

}

.MessageShow

{

	width: 328px;

	height: 200px;

	top: 129px;

	left: 11px;

	position: absolute;

	overflow: auto;

	background-color: #99ffff;

}

.MessageMeun

{

	width: 328px;

	height: 31px;

	left:11px;

	top:329px;

	background-image: url(*.jpg);

	position:absolute;

}

.MessageMeun img

{

	float: right;

	margin-top: 8px;

	margin-right: 10px;

	cursor: hand;

}

.MessageInput

{

	width: 328px;

	height: 134px;

	top: 360px;

	left: 11px;

	position: absolute;

	overflow: auto;

	background-color: #99ffff;

}

.MessageImage

{ 

	width: 329px;

	height: 235px;

	position: absolute;

	top: 95px;

	left: 10px;

	border-right: darkgray 1px solid;

	border-top: darkgray 1px solid;

	border-left: darkgray 1px solid;

	border-bottom: darkgray 1px solid;

	background-image: url(*.jpg);

	background-repeat: no-repeat;

    padding-right: 8px; padding-left: 4px; padding-bottom: 5px; padding-top: 25px;

    overflow:hidden;

    background-color: #ccffff; 

}

.MessageImage img

{

	margin:1px;

	cursor:pointer;

}

.MessageBottom

{

	width: 350px;

	height: 56px;

	top: 494px;

	left: 0px;

	position: absolute;

	background-image: url(*.jpg);

}

.MessageBottom input

{

	border-bottom:#ACACAC 1px solid;

	border-right:#ACACAC 1px solid;

	border-top:#ACACAC 1px solid;

	border-left:#ACACAC 1px solid;

	font-size:9pt;

	background-color:#ccccff;

	float:right;

	margin-right:13px;

	margin-top:2px;

	width:80px;

}

.GroupMessage

{

	/*width:545px;

	height:534px;*/

	width:0px;

	height:0px;

	position:absolute;

	overflow:hidden;

	font-size:12px;

}

.GroupMessageTop

{

	position: absolute;

	width: 545px;

	height: 89px;

	top: 0px;

	left: 0px;

	background-image: url(*.jpg);

	cursor:move;

}

.GroupMessageLeft

{

	position: absolute;

	width: 9px;

	height: 445px;

	top: 89px;

	left: 0px;

	background-image: url(*.jpg);

}

.GroupMessageRight

{

	position: absolute;

	width: 214px;

	height: 445px;

	top: 89px;

	left: 331px;

	background-image: url(*.jpg);

}

.GroupMessageMenu

{

	position: absolute;

	width: 322px;

	height: 22px;

	top: 360px;

	left: 9px;

	background-image: url(*.jpg);

}

.GroupMessageBottom

{

	position: absolute;

	width: 322px;

	height: 42px;

	top: 492px;

	left: 9px;

	background-image: url(*.jpg);

}

.GroupMessageBottom input

{

	border-bottom: #ACACAC 1px solid;

	border-right: #ACACAC 1px solid;

	border-top: #ACACAC 1px solid;

	border-left: #ACACAC 1px solid;

	font-size: 9pt;

	background-color: #ccccff;

	float: right;

	margin-right: 13px;

	margin-top: 12px;

	width: 80px;

}

.GroupMessageCloseMouseOut

{

	position: absolute;

	width: 21px;

	height: 21px;

	top: 4px;

	left: 515px;

	background-image: url(*.jpg);

}

.GroupMessageCloseMouseOver

{

	position: absolute;

	width: 21px;

	height: 21px;

	top: 4px;

	left: 515px;

	background-image: url(*.jpg);

	cursor:pointer;

}

.GroupMessageShow

{

	position: absolute;

	width: 322px;

	height: 271px;

	left: 9px;

	top: 89px;

	overflow: auto;

	background-color: #ffffff;

}

.GroupMessageInput

{

	position: absolute;

	width: 322px;

	height: 110px;

	left: 9px;

	top: 382px;

	overflow: auto;

	background-color: #ffffff;

}

.GroupCallBoard

{

	position: absolute;

	width: 190px;

	height: 130px;

	left: 9px;

	top: 22px;

	overflow: auto;

	background-color: #ffffff;

}

.GroupUserList

{

	position: absolute;

	width: 190px;

	height: 230px;

	left: 9px;

	top: 192px;

	overflow: auto;

	background-color: #ffffff;

}

.GroupMessageName

{

	position: absolute;

	width: 190px;

	height: 40px;

	left: 25px;

	top: 10px;

	font-size:12px;

}

.MeunDiv

{

	position:absolute;

	z-index:9999;

}

.MeunDiv a

{

	background-color: aliceblue;

	text-decoration: none;

	display: block;

	width: 120px;

	height: 20px;

	line-height: 20px;

	text-align: center;

	font-size: 11px;

	border-right: thistle 1px solid;

	border-top: thistle 1px solid;

	border-left: thistle 1px solid;

	border-bottom: thistle 1px solid;

	color: #660000;

}

.MeunDiv a:hover

{

	position: absolute;

	width: 120px;

	height: 40px;

	line-height: 40px;

	font-size: 15px;

	z-index: 100;

	margin: -10px 0 0 -10px;

	background-color: #ffccff;

}
darkfxux7788 2008-03-04
  • 打赏
  • 举报
 回复
CSS部分


body 

{

	margin-left:0px;

	margin-top:0px;

	font-size:12px;

}

ul

{

	margin-top:0px;

	margin-bottom:0px;

	font-size:12px;

}

ul li

{

	 margin-top:0px;

	 margin-bottom:0px;

	 list-style-image: url(*.jpg);

}

ul li a

{

	cursor:pointer;

}

.UserList li

{

	list-style-image: url(*.jpg); 

	margin-left:-20px

}

.ShowDiv

{

	position: absolute;

	overflow: hidden;

	width: 10px;

	height: 10px;

	z-index: 10;

	top: 50px;

	left: 50px;

	background-color: Aqua;

	cursor:hand;

}

.ShowDivBack

{

	position:absolute;

	overflow:hidden;

	width:10px;

	height:10px;

	z-index:9;

	top:52px;

	left:52px;

	background-color:Black;

}

.WishDiv

{

	width: 242px;

	height: 232px;

	position: absolute;

	font-size:12px;

	cursor:hand;

}

.WishContent

{

	width:200px;

	height:140px;

	position: absolute;

	left:26px;

	top:45px;

	overflow:hidden;

}

.WishByName

{

	width:200px;

	height:20px;

	text-align:right;

	position: absolute;

	left: 26px;

	top: 187px

}

.FrmGroupMouseOut

{ 

	width: 184px;

	height: 20px;

	background-image: url(*.jpg);

	text-align:center;

	font-size:12px;

	cursor:hand;

	color: silver;

}



.FrmGroupMouseOver

{

	width: 184px;

	height: 20px;

	background-image: url(*.jpg);

	text-align:center;

	font-size:12px;

	cursor:hand;

	overflow:hidden;

}

.FrmMessageMouseOver

{

	width: 35px;

	height: 14px;

	position: absolute;

	top: 65px;

	left: 20px;

	background-image: url(*.jpg);

	font-size: 12px;

	cursor: pointer;

	padding-left: 16px;

	background-repeat: no-repeat;

	color: #000033;

}

.FrmMessageMouseOut

{

	width: 35px;

	height: 14px;

	position: absolute;

	top: 65px;

	left: 20px;

	background-image: url(*.jpg);

	font-size: 12px;

	cursor: pointer;

	padding-left: 16px;

	background-repeat: no-repeat;

	color: #ffffff;

}

.FrmMoreMouseOut

{

	width: 16px;

	height: 16px;

	position: absolute;

	top: 25px;

	left: 55px;

	background-image: url(*.jpg);

	font-size: 1px;

	cursor:hand;

}

.FrmMoreMouseOver

{

	width: 16px;

	height: 16px;

	position: absolute;

	top: 25px;

	left: 55px;

	background-image: url(*.jpg);

	font-size: 1px;

	cursor:hand;

}

.FrmCloseMouseOut

{

	width: 39px;

	height: 17px;

	top: 10px;

	left: 152px;

	position:absolute;

	background-image: url(*.jpg);

	font-size:1px;

	cursor:hand;

}

.FrmCloseMouseOver

{

	width: 39px;

	height: 17px;

	top: 10px;

	left: 152px;

	position:absolute;

	background-image: url(*.jpg);

	font-size:1px;

	cursor:hand;

}

.UserUnSelect

{

	height:40px;

	margin-top:2px; 

	margin-left:5px; 

	font-size:12px; 

	color:#696969;

	padding:2px;

}

.UserSelect

{

	height:40px;

	margin-top: 2px;

	margin-left: 5px;

	font-size: 12px;

	color: #696969;

	padding: 2px;

	border-right: #99ccff 1px solid;

	border-top: #99ccff 1px solid;

	border-left: #99ccff 1px solid;

	border-bottom: #99ccff 1px solid;

	background-color: #ccccff;

	cursor:pointer;

}

.UserImageMouseOut

{

	float:left;

	clear:left;

}

.UserImageMouseOver

{

	

}

.UserNameIdi

{

	float:left;

	margin-left:5px

}

.UserDetailDiv

{

	width: 302px;

	height: 243px;

	position: absolute;

	background-image: url(*.jpg);

	z-index: 9000;

	background-repeat: no-repeat;

}

.UserDetailInformatiomLoading

{

	width: 150px;

	height: 126px;

	top: 20px;

	left: 140px;

	position: absolute;

	background-repeat: no-repeat;

	background-image: url(*.gif);

}

.UserDetailInformatiomComplete

{

	width: 150px;

	height: 126px;

	top: 10px;

	left: 100px;

	position: absolute;

	font-size:12px;

}

.UserDetailLocation

{

	position: absolute;

	font-size:12px;

	width: 150px;

	height: 126px;

	top: 220px;

	left: 150px;

}

.UserGirl

{

	width: 86px;

	height: 126px;

	position: absolute;

	left:10px;

	top:10px;

	background-image: url(*.jpg);

}

.UserBoy

{

	width: 86px;

	height: 126px;

	position: absolute;

	left:10px;

	top:10px;

	background-image: url(*.jpg);

}

#MainFrm

{

	width:202px;

	height:600px;

	position:absolute;

	top:100px;

	left:400px;

	z-index:9000;

}

#FrmTop

{

	width: 202px;

	height: 85px;

	position: absolute;

	background-image: url(*.jpg);

	cursor:move;

}

#FrmLeft

{

	width:9px;

	height:482px;

	background-image: url(*.jpg);

	position: absolute;

	top:85px;

	left:0px;

}

#FrmMid

{

	width:184px;

	height:482px;

	position:absolute;

	top:85px;

	left:9px;

	overflow:hidden;

	background-image: url(*.jpg);

}

#FrmRight

{

	width:9px;

	height:482px;

	background-image: url(*.jpg);

	position:absolute;

	top:85px;

	left:193px;

}

#FrmBottom

{

	width: 202px;

	height:33px;

	background-image: url(*.jpg);

	position:absolute;

	top:567px;

	left:0px;

}

#FrmUserHead

{

	width: 40px;

	height: 40px;

	position: absolute;

	top: 15px;

	left: 10px;

	background-image: url(*.jpg);

	border-right: #ffffff 1px solid;

	border-top: #ffffff 1px solid;

	border-left: #ffffff 1px solid;

	border-bottom: #ffffff 1px solid;

}

.FrmMenuMouseOut

{

	width: 16px;

	height: 12px;

	position: absolute;

	top: 66px;

	left: 80px;

	background-image: url(*.jpg);

	background-repeat: no-repeat;

	padding-left: 17px;

	cursor: pointer;

	color: #ffffff;

}

.FrmMenuMouseOver

{

	width: 16px;

	height: 12px;

	position: absolute;

	top: 66px;

	left: 80px;

	background-image: url(*.jpg);

	background-repeat: no-repeat;

	padding-left: 17px;

	cursor: pointer;

	color: gray;

}



.MessageFrm

{

	width:0px;

	height:0px;

	position:absolute;

	overflow:hidden;

}

.MessageHead

{

	width: 350px;

	height: 96px;

	background-image: url(*.jpg);

	position:absolute;

	cursor:move;

}

.MessageCloseMouseOut

{

	width: 21px;

	height: 21px;

	background-image: url(*.jpg);

	top:4px;

	left:320px;

	position:absolute;

}

.MessageCloseMouseOver

{

	width: 21px;

	height: 21px;

	background-image: url(*.jpg);

	top:4px;

	left:320px;

	position:absolute;

	cursor:pointer;

}

.MessageAboutUser

{

	width: 100px;

	height: 40px;

	position: absolute;

	top: 60px;

	left: 20px;

	color: #000066;

	font-size: 12px;

}
darkfxux7788 2008-03-04
  • 打赏
  • 举报
 回复
所以想通了，自己写了上面的。。。。。。呵呵。。。。。。
一把编程的菜刀 2008-03-04
  • 打赏
  • 举报
 回复
图片也可以做按钮的 ,也可以出发事件的！！
darkfxux7788 2008-03-04
  • 打赏
  • 举报
 回复
TO CHINMO
想触发个事件

TO Free_Wind22
你的方法不对
JavaScript

87,915

社区成员

224,620

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章