Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta http-equiv= "Content-script-type" content= "Text/javascript" >
<meta http-equiv= "Content-style-type" content= "Text/css" >
<title>dodi Chat v1.0 beta</title>
<style rel= "stylesheet" type= "Text/css" media= "All"/>
<!--
Body {
Text-align:left;
margin:0;
Font:normal 12px Verdana, Arial;
Background: #FFEEFF
}
form {
margin:0;
Font:normal 12px Verdana, Arial;
}
Table,input {
Font:normal 12px Verdana, 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:1px solid #003399;
Background: #DCDCFF;
font-size:11px;
Color: #3366FF;
Cursor:move;
}
#ChatHead A:link, #ChatHead a:visited, {
font-size:14px;
Font-weight:bold;
padding:0 3px
}
#ChatBody {
border:1px solid #003399;
Border-top:none;
padding:2px;
}
#ChatContent {
height:200px;
padding:6px;
Overflow-y:scroll;
Word-break:break-all
}
#ChatBtn {
border-top:1px solid #003399;
padding:2px
}
-->
</style>
<script language= "javascript" type= "Text/javascript" >
<!--
function Chathidden ()
{
document.getElementById ("Chatbody"). Style.display = "None";
}
function chatshow ()
{
document.getElementById ("Chatbody"). Style.display = "";
}
function Chatclose ()
{
document.getElementById ("main"). Style.display = "None";
}
function Chatsend (obj)
{
var o = obj. Chatvalue;
if (o.value.length>0) {
document.getElementById ("Chatcontent"). InnerHTML + = "<strong>akon said:</strong>" +o.value+ "<br/>";
O.value= ';
}
}
if (document.getElementById)
{
(
function ()
{
if (Window.opera) {document.write ("<input type= ' hidden ' id= ' Q ' value= ' ' > ');}
var n = 500;
var Dragok = false;
var y,x,d,dy,dx;
function Move (e)
{
if (!e) e = window.event;
if (Dragok) {
D.style.left = dx + e.clientx-x + "px";
D.style.top = dy + e.clienty-y + "px";
return false;
}
}
function Down (e)
{
if (!e) e = window.event;
var temp = (typeof e.target!= "undefined")? E.target:e.srcelement;
if (temp.tagname!= "HTML |") Body "&& temp.classname!=" Dragclass ") {
temp = (typeof temp.parentnode!= "undefined")? Temp.parentNode:temp.parentElement;
}
if (' TR ' ==temp.tagname) {
temp = (typeof temp.parentnode!= "undefined")? Temp.parentNode:temp.parentElement;
temp = (typeof temp.parentnode!= "undefined")? Temp.parentNode:temp.parentElement;
temp = (typeof temp.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;
return false;
}
}
function up () {
Dragok = false;
Document.onmousemove = null;
}
Document.onmousedown = down;
Document.onmouseup = up;
}
)();
}
-->
</script>
<body>
<div id= "main" class= "Dragclass" >
<div id= "Chathead" >
<a href= "#" onclick= "Chathidden ();" >-</a>
<a href= "#" onclick= "chatshow ();" >+</a>
<a href= "#" onclick= "Chatclose ();" >x</a>
</div>
<div id= "Chatbody" >
<div id= "Chatcontent" ></div>
<div id= "CHATBTN" >
<form action= "" name= "chat" method= "POST" >
<textarea name= "Chatvalue" rows= "3" style= "width:350px" ></textarea>
<input name= "Submit" type= "button" value= "Chat" onclick= "Chatsend (this.form);"/>
</form>
</div>
</div>
</div>
</body>
A drag effect, according to some of the forum posts changed, but there are some bugs have been unable to solve, who can help me change?
When you drag a layer for the first time, the position of the layer deviates very far.
uh ..... This involves a style problem ...
In IE and Firefox, Obj.style is actually just getting the value of the attribute style in the element!
In the following example, you will find that none of the attributes in the style block can be taken!
Copy Code code as follows:
<style>
#test {width:100px;background-color:red;}
</style>
<script>
Window.onload=function () {
var T=document.getelementbyid (' Test ')
var Ts=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>
<div id= "test" style= "color:yellow;padding-left:100px;" >
</div>
</body>
Did you see it? The first two style is empty and the last two have a value.
If it is IE, the problem is very good to solve, as long as the style changed to Currentstyle can be.
IE only
Copy Code code as follows:
<style>
#test {width:100px;background-color:red;}
</style>
<script>
Window.onload=function () {
var T=document.getelementbyid (' Test ')
var Ts=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>
<div id= "test" style= "color:yellow;padding-left:100px;" >
</div>
</body>
FF only
Copy Code code as follows:
<style>
#test {width:100px;background-color:red;}
</style>
<script>
Window.onload=function () {
var T=document.getelementbyid (' Test ')
var ts=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>
<div id= "test" style= "color:yellow;padding-left:100px;" >
</div>
</body>
I have been around for a long time, do you understand the reason for your mistake? Your style is all document-level style, and when you try to get left, the first time you get a 0, it will naturally move your box to the side.
Current 1/2 page
12 Next read the full text
