实现IE和FF兼容的拖动层效果
需积分: 0 170 浏览量
更新于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”>
<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>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
下载后可阅读完整内容，剩余3页未读，立即下载
2020-10-27 上传
210 浏览量
2020-10-30 上传
2020-12-11 上传
weixin_38698149
- 粉丝: 5
- 资源: 935
我的内容管理
展开
最新资源
- loopback-connector-oriento:用于 OrientDB 的 Node.js LoopBack 连接器。 使用二进制协议
- lkJSOn.pas的改进版, 支持中文, 非常不错(uLkJSON.pas)
- py-idstools:idstools
- node-v15.10.0-linux-x64.tar.gz
- monitoring-media-player-using-hand-getsures---opencv
- material-ui-speed-dial:实现Material-ui v1的材料设计快速拨号的组件
- heat文件_热流密度计算_heat_热流_换热_换热系数
- Excel模板-工资晋档.rar
- Python库 | refine-contigs-0.0.10.tar.gz
- WM-811K_semiconductor_wafer_map_pattern_classified:Web数据集WM-811K分类的半导体晶片图案图
- Interface_test.rar
- gulp-scss-lint-visualstudio:gulp-scss-lint 的 Visual Studio 报告器
- xhcms靶场源码，无密码，解压即用
- iOS-Samples:此存储库将包含iOS应用程序示例代码
- titanium-admob:将原生Admob SDK与Axway Hyperloop和Titanium结合使用
- Lively Wallpaper一款壁纸软件
