实现IE和FF兼容的拖动层效果
需积分: 0 79 浏览量
更新于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页未读，立即下载
286 浏览量
116 浏览量
点击了解资源详情
2020-10-30 上传
1488 浏览量
点击了解资源详情
557 浏览量
2025-03-10 上传
2025-03-10 上传
weixin_38698149
- 粉丝: 5
我的内容管理
展开
最新资源
- 如何验证缓冲区UTF-8编码的有效性
- SSM框架整合开发视频教程
- WORD字处理第1套题目要求解析
- 《C程序设计（第四版）》谭浩强著课件精要
- PHPExcelReader：高效的PHP类读取Excel文件
- 恐惧极客挑战：Re-entry-VR体验带你领略废弃飞船逃生之旅
- 基于C#和SQL的酒店管理系统毕业设计完整项目
- C++实现图形化扫雷游戏设计与开发
- OctoPrint-FileManager插件：OctoPrint的简化管理工具
- VIVO BBK5.1.11版本刷机工具使用指南
- Python基础与应用教程及源代码解析
- 如何使用C/C++读取图片EXIF信息的详细步骤
- Guzzle基础教程：构建Web服务客户端指南
- ArcGIS地图SDK for Unreal引擎1.0.0发布
- 实现淘宝式图片放大镜效果的jQuery教程
- 小波神经网络纹理分类工具的研发与应用
