实现IE和FF兼容的拖动层效果

需积分: 0 37 浏览量更新于2024-09-02 收藏 45KB PDF 举报

拖动层效果，兼容IE和FF! 拖动层效果是指在网页中实现拖动层的效果，使用户可以自由拖动层的位置。为了实现这种效果，我们需要使用HTML、CSS和JavaScript技术。同时为了兼容不同的浏览器，如IE和FF，我们需要使用相应的兼容性解决方案。首先，让我们来看一下HTML代码： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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>DoDiChat v1.0 Beta</title> <style rel="stylesheet" type="text/css" media="all"/> ``` 在上面的代码中，我们可以看到使用了XHTML 1.0 Transitional文档类型，并定义了字符编码为GB2312。同时，我们还定义了三个meta标签，分别用于指定内容类型、脚本类型和样式类型。接下来，让我们来看一下CSS代码： ```css 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 } ``` 在上面的CSS代码中，我们定义了几个样式规则，用于控制页面的布局和样式。例如，我们定义了body元素的文本对齐方式、边距、字体和背景颜色。同时，我们还定义了form元素、table元素和input元素的样式规则。在IE和FF浏览器中，为了实现拖动层效果，我们需要使用JavaScript技术。我们可以使用JavaScript来获取拖动层的位置和尺寸，并根据用户的操作来更新拖动层的位置。实现拖动层效果需要使用HTML、CSS和JavaScript技术，并需要考虑浏览器的兼容性问题。只有通过合理地使用这些技术，我们才能实现一个功能强大且兼容性的拖动层效果。

拖动层效果，兼容拖动层效果，兼容IE和和FF!第第1/2页页

代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

<head>

<!–

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

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38698149

粉丝: 5
资源: 935

实现IE和FF兼容的拖动层效果

最新资源