手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >拖动层效果,兼容IE和FF!第1/2页
拖动层效果,兼容IE和FF!第1/2页
摘要:复制代码代码如下: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"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,自然会把你的框给挪到边上去了。

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

【拖动层效果,兼容IE和FF!第1/2页】相关文章:

非常酷的有农历的日历挂历!

滚动效果

javascript无刷新评论实现方法

卡拉 OK 字幕效果

JS+CSS实现的拖动分页效果实例

Nodejs实现批量下载妹纸图

javascript清空table表格的方法

jquery实现弹出层效果实例

jquery控制表单输入框显示默认值的方法

Javascript 小技巧全集第1/4页

精品推荐
分类导航