模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
层和布局特效代码
>
收藏
分享
查看评论
层和布局
演示
可拖动、关闭及最小化的层拖动窗口_层和布局特效
查看演示效果
特效Tag:
层拖动
添加
一款JS的应用实例,一个可以拖动的DIV层窗口,同时这它还支持关闭、最小化功能。
<!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="mrc-type" mrc="text/html; charset=gb2312"> <meta http-equiv="mrc-script-type" mrc="text/javascript"> <meta http-equiv="mrc-style-type" mrc="text/css"> <title>DoDi Chat v1.0 Beta_Demo:mb5u.com</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:20px; top:30px; 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 } #ChatBtn { border-top:1px solid #003399; padding:2px } --> </style> <script language="javascript" type="text/javascript"> <!-- function $(d){return document.getElementById(d);} function gs(d){var t=$(d);if (t){return t.style;}else{return null;}} function gs2(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } function ChatHidden(){gs("ChatBody").display = "none";} function ChatShow(){gs("ChatBody").display = "";} function ChatClose(){gs("main").display = "none";} function ChatSend(obj){ var o = obj.ChatValue; if (o.value.length>0){ $("ChatContent").innerHTML += "<strong>Akon说:</strong>"+o.value+"<br/>"; o.value=''; } } if(document.getElementById){ ( function(){ if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); } var n = 500; var dragok = false; var y,x,d,dy,dx; function move(e) { if (!e) e = window.event; if (dragok){ d.style.left = dx + e.clientX - x + "px"; d.style.top= dy + e.clientY - y + "px"; return false; } } function down(e){ if (!e) e = window.event; var temp = (typeof e.target != "undefined")?e.target:e.srcElement; if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; } if('TR'==temp.tagName){ temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; } if (temp.className == "dragclass"){ if (window.opera){ document.getElementById("Q").focus(); } dragok = true; temp.style.zIndex = n++; d = temp; dx = parseInt(gs2(temp,"left"))|0; dy = parseInt(gs2(temp,"top"))|0; x = e.clientX; y = e.clientY; document.onmousemove = move; return false; } } function up(){ dragok = false; document.onmousemove = null; } document.onmousedown = down; document.onmouseup = up; } )(); } --> </script> </head> <body> <div id="main" class="dragclass"> <div id="ChatHead"> <a href="#" onclick="ChatHidden();">-</a> <a href="#" onclick="ChatShow();">+</a> <a href="#" onclick="ChatClose();">x</a> </div> <div id="ChatBody"> <div id="ChatContent"></div> <div id="ChatBtn"> <form action="" name="chat" method="post"> <textarea name="ChatValue" rows="3" style="width:260px"></textarea> <input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" /> </form> </div> </div> </div> </body> </html>
所属频道:
层和布局特效
/
更新时间:2012-12-19
[收藏]
[报错]
[返回列表]
相关
层和布局特效
:
表格内容排序sortTable
行变成列,列变成行
文本输入限制
拆分单元格
控制表格内的滚动条
颜色交替的表格
JS计算里面有多少个
极酷的表格
会动的表格
可拖动单元格
变色表格
访问表格的每个TD
层和布局特效Rss订阅
特效代码搜索
层和布局特效推荐
自写的JavaScript层拖动
jQuery 鼠标经过Div底色变换(滑动变色)
JS+CSS漂亮的滑出提示层
一款常见的图文混排的Blog文章列表
鼠标点击后层展开JavaScript
可保存位置并自动吸附的JavaScript拖动层
网页右侧可关闭的漂浮窗口
CSS层透明效果,兼容性很好
滑动展开一个层的JavaScript代码
Div+CSS,图片垂直居中
猜你也喜欢看这些
JS控制网页背景随窗口大小自动适应
CSS滤镜实现网页背景图片渐变
点击链接后跳出一个链接说明小窗口
弹出提示的效果
下大雨效果的网页背景,你肯定喜欢
IE色彩处理过程
避免别人把你的网页放在框架中
一个滚动的公告栏
CSS渐变背景的6个演示代码
多项目选择脚本-按要求放
相关链接:
复制本页链接
|
搜索可拖动、关闭及最小化的层拖动窗口
特效说明:
层和布局模板
-
可拖动、关闭及最小化的层拖动窗口
。