拖动层效果,兼容IE和FF!第1/2页_Javascript教程-查字典教程网
拖动层效果,兼容IE和FF!第1/2页
拖动层效果,兼容IE和FF!第1/2页
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:DoDiChatv1.0Beta-+x一个拖动效果,根据论坛的一些帖子改的,但还有一些BUG一直没法解决,谁能帮我改改?当...

复制代码 代码如下:

<!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"/>

<>

</style>

<scriptlanguage="javascript"type="text/javascript">

<>

</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"></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">

</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">

</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">

</div>

</body>

我绕了半天,你明白你的错误原因了吗?你的style全都是文档级style,而你试图获取left的时候,第一次获得的只是0,自然会把你的框给挪到边上去了。

当前1/2页12下一页阅读全文

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类