复制代码 代码如下:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DoDi Chat v1.0 Beta
<script> <br/> <!-- <br/> function ChatHidden() <br/> { <br/> document.getElementById("ChatBody").style.display = "none"; <br/> } <br/> function ChatShow() <br/> { <br/> document.getElementById("ChatBody").style.display = ""; <br/> } <br/> function ChatClose() <br/> { <br/> document.getElementById("main").style.display = "none"; <br/> } <br/> function ChatSend(obj) <br/> { <br/> var o = obj.ChatValue; <br/> if (o.value.length>0){ <br/> document.getElementById("ChatContent").innerHTML += "<strong>Akon说："+o.value+"<br/>"; <br/> o.value=''; <br/> } <br/> } <br/><br/> if (document.getElementById) <br/> { <br/> ( <br/> function() <br/> { <br/> if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); } <br/><br/> var n = 500; <br/> var dragok = false; <br/> var y,x,d,dy,dx; <br/><br/> function move(e) <br/> { <br/> if (!e) e = window.event; <br/> if (dragok){ <br/> d.style.left = dx + e.clientX - x + "px"; <br/> d.style.top = dy + e.clientY - y + "px"; <br/> return false; <br/> } <br/> } <br/><br/> function down(e) <br/> { <br/> if (!e) e = window.event; <br/> var temp = (typeof e.target != "undefined")?e.target:e.srcElement; <br/> if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> } <br/> if('TR'==temp.tagName){ <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> } <br/><br/> if (temp.className == "dragclass"){ <br/> if (window.opera){ document.getElementById("Q").focus(); } <br/> dragok = true; <br/> temp.style.zIndex = n++; <br/> d = temp; <br/> dx = parseInt(temp.style.left+0); <br/> dy = parseInt(temp.style.top+0); <br/> x = e.clientX; <br/> y = e.clientY; <br/> document.onmousemove = move; <br/> return false; <br/> } <br/> } <br/><br/> function up(){ <br/> dragok = false; <br/> document.onmousemove = null; <br/> } <br/><br/> document.onmousedown = down; <br/> document.onmouseup = up; <br/><br/> } <br/> )(); <br/> } <br/> --> <br/> </script>
-
+
x
一个拖动效果，根据论坛的一些帖子改的，但还有一些bug一直没法解决，谁能帮我改改？
当第一次拖动层时，层的位置会偏离很远。
呃。。。这涉及到一个style的问题。。。
在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！
如下例，你会发现style块中的属性一个都取不到！
复制代码 代码如下:
<script> <br/>window.onload=function(){ <br/>var t=document.getElementById('test') <br/>var ts=t.style; <br/>t.innerHTML= <br/>"t.style.width:"+ts.width+"<br />"+ <br/>"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ <br/>"t.style.color:"+ts.color+"<br />"+ <br/>"t.style.paddingLeft:"+ts.paddingLeft <br/>} <br/></script>
看到了没？前两个style 为空，后两个才有值。
如果是ie，问题很好解决，只要把style改成currentStyle即可。
IE Only
复制代码 代码如下:
<script> <br/>window.onload=function(){ <br/>var t=document.getElementById('test') <br/>var ts=t.currentStyle; <br/>t.innerHTML= <br/>"t.style.width:"+ts.width+"<br />"+ <br/>"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ <br/>"t.style.color:"+ts.color+"<br />"+ <br/>"t.style.paddingLeft:"+ts.paddingLeft <br/>} <br/></script>
FF only
复制代码 代码如下:
<script> <br/>window.onload=function(){ <br/>var t=document.getElementById('test') <br/>var ts=document.defaultView.getComputedStyle(t, null); <br/>t.innerHTML= <br/>"t.style.width:"+ts.width+"<br />"+ <br/>"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ <br/>"t.style.color:"+ts.color+"<br />"+ <br/>"t.style.paddingLeft:"+ts.paddingLeft <br/>} <br/></script>
我绕了半天，你明白你的错误原因了吗？你的style全都是文档级style，而你试图获取left的时候，第一次获得的只是0,自然会把你的框给挪到边上去了。
最终效果
复制代码 代码如下:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DoDi Chat v1.0 Beta
<script> <br/> <!-- <br/> function $(d){return document.getElementById(d);} <br/> function gs(d){var t=$(d);if (t){return t.style;}else{return null;}} <br/> function gs2(d,a){ <br/> if (d.currentStyle){ <br/> var curVal=d.currentStyle[a] <br/> }else{ <br/> var curVal=document.defaultView.getComputedStyle(d, null)[a] <br/> } <br/> return curVal; <br/> } <br/> function ChatHidden(){gs("ChatBody").display = "none";} <br/> function ChatShow(){gs("ChatBody").display = "";} <br/> function ChatClose(){gs("main").display = "none";} <br/> function ChatSend(obj){ <br/> var o = obj.ChatValue; <br/> if (o.value.length>0){ <br/> $("ChatContent").innerHTML += "<strong>Akon说："+o.value+"<br/>"; <br/> o.value=''; <br/> } <br/> } <br/><br/> if (document.getElementById){ <br/> ( <br/> function(){ <br/> if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); } <br/><br/> var n = 500; <br/> var dragok = false; <br/> var y,x,d,dy,dx; <br/><br/> function move(e) <br/> { <br/> if (!e) e = window.event; <br/> if (dragok){ <br/> d.style.left = dx + e.clientX - x + "px"; <br/> d.style.top = dy + e.clientY - y + "px"; <br/> return false; <br/> } <br/> } <br/><br/> function down(e){ <br/> if (!e) e = window.event; <br/> var temp = (typeof e.target != "undefined")?e.target:e.srcElement; <br/> if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> } <br/> if('TR'==temp.tagName){ <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; <br/> } <br/><br/> if (temp.className == "dragclass"){ <br/> if (window.opera){ document.getElementById("Q").focus(); } <br/> dragok = true; <br/> temp.style.zIndex = n++; <br/> d = temp; <br/> dx = parseInt(gs2(temp,"left"))|0; <br/> dy = parseInt(gs2(temp,"top"))|0; <br/> x = e.clientX; <br/> y = e.clientY; <br/> document.onmousemove = move; <br/> return false; <br/> } <br/> } <br/><br/> function up(){ <br/> dragok = false; <br/> document.onmousemove = null; <br/> } <br/><br/> document.onmousedown = down; <br/> document.onmouseup = up; <br/><br/> } <br/> )(); <br/> } <br/> --> <br/> </script>
-
+
x
附解决问题的过程：
1、首先debug，看表现，就知道是在第一次点击的时候，对象的左右边距出错，变成0
2、找到代码中对应位置，输出left和top
3、知道原因，我之前已经知道currentStyle的效果，所以我不需要去网络上搜索相关资料
4、但是我不知道在firefox下如何处理
5、我在google里直接搜索“currentStyle firefox”，很快就找到符合我目的的信息
6、测试通过，发帖子。
0
广告
收藏
761
