复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
<metahttp-equiv="content-script-type"content="text/javascript">
<metahttp-equiv="content-style-type"content="text/css">
<title>DoDiChatv1.0Beta</title>
<stylerel="stylesheet"type="text/css"media="all"/>
<!--
body{
text-align:left;
margin:0;
font:normal12pxVerdana,Arial;
background:#FFEEFF
}
form{
margin:0;
font:normal12pxVerdana,Arial;
}
table,input{
font:normal12pxVerdana,Arial;
}
a:link,a:visited{
text-decoration:none;
color:#333333;
}
a:hover{
text-decoration:none;
color:#FF6600
}
#main{
width:400px;
position:absolute;
left:600px;
top:100px;
background:#EFEFFF;
text-align:left;
filter:Alpha(opacity=90)
}
#ChatHead{
text-align:right;
padding:3px;
border:1pxsolid#003399;
background:#DCDCFF;
font-size:11px;
color:#3366FF;
cursor:move;
}
#ChatHeada:link,#ChatHeada:visited,{
font-size:14px;
font-weight:bold;
padding:03px
}
#ChatBody{
border:1pxsolid#003399;
border-top:none;
padding:2px;
}
#ChatContent{
height:200px;
padding:6px;
overflow-y:scroll;
word-break:break-all
}
#ChatBtn{
border-top:1pxsolid#003399;
padding:2px
}
-->
</style>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionChatHidden()
{
document.getElementById("ChatBody").style.display="none";
}
functionChatShow()
{
document.getElementById("ChatBody").style.display="";
}
functionChatClose()
{
document.getElementById("main").style.display="none";
}
functionChatSend(obj)
{
varo=obj.ChatValue;
if(o.value.length>0){
document.getElementById("ChatContent").innerHTML+="<strong>Akon说：</strong>"+o.value+"<br/>";
o.value='';
}
}
if(document.getElementById)
{
(
function()
{
if(window.opera){document.write("<inputtype='hidden'id='Q'value=''>");}
varn=500;
vardragok=false;
vary,x,d,dy,dx;
functionmove(e)
{
if(!e)e=window.event;
if(dragok){
d.style.left=dx+e.clientX-x+"px";
d.style.top=dy+e.clientY-y+"px";
returnfalse;
}
}
functiondown(e)
{
if(!e)e=window.event;
vartemp=(typeofe.target!="undefined")?e.target:e.srcElement;
if(temp.tagName!="HTML"|"BODY"&&temp.className!="dragclass"){
temp=(typeoftemp.parentNode!="undefined")?temp.parentNode:temp.parentElement;
}
if('TR'==temp.tagName){
temp=(typeoftemp.parentNode!="undefined")?temp.parentNode:temp.parentElement;
temp=(typeoftemp.parentNode!="undefined")?temp.parentNode:temp.parentElement;
temp=(typeoftemp.parentNode!="undefined")?temp.parentNode:temp.parentElement;
}
if(temp.className=="dragclass"){
if(window.opera){document.getElementById("Q").focus();}
dragok=true;
temp.style.zIndex=n++;
d=temp;
dx=parseInt(temp.style.left+0);
dy=parseInt(temp.style.top+0);
x=e.clientX;
y=e.clientY;
document.onmousemove=move;
returnfalse;
}
}
functionup(){
dragok=false;
document.onmousemove=null;
}
document.onmousedown=down;
document.onmouseup=up;
}
)();
}
-->
</script>
</head>
<body>
<divid="main"class="dragclass">
<divid="ChatHead">
<ahref="#"onclick="ChatHidden();">-</a>
<ahref="#"onclick="ChatShow();">+</a>
<ahref="#"onclick="ChatClose();">x</a>
</div>
<divid="ChatBody">
<divid="ChatContent"></div>
<divid="ChatBtn">
<formaction=""name="chat"method="post">
<textareaname="ChatValue"rows="3"style="width:350px"></textarea>
<inputname="Submit"type="button"value="Chat"onclick="ChatSend(this.form);"/>
</form>
</div>
</div>
</div>
</body>
</html>
一个拖动效果，根据论坛的一些帖子改的，但还有一些BUG一直没法解决，谁能帮我改改？
当第一次拖动层时，层的位置会偏离很远。
呃。。。这涉及到一个style的问题。。。
在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！
如下例，你会发现style块中的属性一个都取不到！
复制代码 代码如下:
<style>
#test{width:100px;background-color:red;}
</style>
<script>
window.onload=function(){
vart=document.getElementById('test')
varts=t.style;
t.innerHTML=
"t.style.width:"+ts.width+"<br/>"+
"t.style.backgroundColor:"+ts.backgroundColor+"<br/>"+
"t.style.color:"+ts.color+"<br/>"+
"t.style.paddingLeft:"+ts.paddingLeft
}
</script>
<body>
<divid="test"style="color:yellow;padding-left:100px;">
</div>
</body>
看到了没？前两个style为空，后两个才有值。
如果是ie，问题很好解决，只要把style改成currentStyle即可。
IE Only
复制代码 代码如下:
<style>
#test{width:100px;background-color:red;}
</style>
<script>
window.onload=function(){
vart=document.getElementById('test')
varts=t.currentStyle;
t.innerHTML=
"t.style.width:"+ts.width+"<br/>"+
"t.style.backgroundColor:"+ts.backgroundColor+"<br/>"+
"t.style.color:"+ts.color+"<br/>"+
"t.style.paddingLeft:"+ts.paddingLeft
}
</script>
<body>
<divid="test"style="color:yellow;padding-left:100px;">
</div>
</body>
FF only
复制代码 代码如下:
<style>
#test{width:100px;background-color:red;}
</style>
<script>
window.onload=function(){
vart=document.getElementById('test')
varts=document.defaultView.getComputedStyle(t,null);
t.innerHTML=
"t.style.width:"+ts.width+"<br/>"+
"t.style.backgroundColor:"+ts.backgroundColor+"<br/>"+
"t.style.color:"+ts.color+"<br/>"+
"t.style.paddingLeft:"+ts.paddingLeft
}
</script>
<body>
<divid="test"style="color:yellow;padding-left:100px;">
</div>
</body>
我绕了半天，你明白你的错误原因了吗？你的style全都是文档级style，而你试图获取left的时候，第一次获得的只是0,自然会把你的框给挪到边上去了。
12下一页阅读全文
