文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院网站建设Html可移动层的实现示例
精品推荐
特别推荐
·用CSS控制浏览器的滚动条
·marquee标记的用法
·HTML语言:什么是Unicode 什么是UTF-8
·XHTML编写网页代码的七条基本规范
·HTML和XHTML的区别
·HTML语言:什么是Unicode?什么是UTF-8?
·HTML 和 XHTML 区别
·HTML标记全集
·分析比较:三种简洁的Tab导航简析
·HTML教程-HTML简介
热点TOP10
·document.execCommand() 解析
·学习网页设计时要注意HTML向XHTML转化
·使用HTML+CSS编写灵活的Tab页
·图片左右循环连续滚动代码,解决marquee的留白问题
·MyHTML Player release v1.1
·首页用户登陆模板
·页面显示问题
·科汛供求管理系统介绍
·下拉列表框1下拉列表框2(HTML版)
·CSS:font-weight

可移动层的实现示例

日期:2008年5月22日 作者: 查看:[大字体 中字体 小字体]


  关键字: javascript, dhtml, div, 层, 移动

  本文提供了一个通过javascript+dhtml脚本实现在IE浏览器里面显示的可以被鼠标拖动的层。这个层能够自动滚动或者被关闭,就像我的Z-Tips一样:)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language=javascript>
// bigin fly bar
var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;
function HideFlyBar(){
divFlyBar.style.visibility = "hidden";
myFlyBarRestorButton.style.display = '';
}

function openFlyBar(){
myload_flybar();
divFlyBar.style.visibility = "visible";
myFlyBarRestorButton.style.display = "none";
}
function catchFlyBar(e){
bIsCatchFlyBar = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragClickX=x-divFlyBar.style.pixelLeft;
dragClickY=y-divFlyBar.style.pixelTop;
divFlyBar.setCapture();
document.onmousemove = moveFlyBar;
}
function releaseFlyBar(e){
bIsCatchFlyBar = false;
divFlyBar.releaseCapture();
document.onmousemove = null;
}
function moveFlyBar(e){
if(bIsCatchFlyBar){
divFlyBar.style.left = event.x+document.body.scrollLeft-dragClickX;
divFlyBar.style.top = event.y+document.body.scrollTop-dragClickY;
}
}
function myload_flybar(){
divFlyBar.style.top=document.body.scrollTop;
divFlyBar.style.left=document.body.offsetWidth-divFlyBar.clientWidth-30+document.body.scrollLeft;
}

window.onresize = myload_flybar;
window.onscroll = myload_flybar;
window.onload = openFlyBar;
// end fly bar
</script>
</HEAD>

<BODY>
<div id=divFlyBar onMouseDown="catchFlyBar()" onMouseUp="releaseFlyBar()" style='position:absolute;top:0;left:1;visibility:hidden;cursor:move;z-index:100'>
<table style="filter:alpha(opacity=90);background-color:#9A9A9A;" width=192 border="0" cellspacing="1" cellpadding="0"><tr><td><table width=100% border=0 cellpadding=0 cellspacing=0><tr valign=middle style="background-color:#212121;"><td><img src="http://www.webjx.com/images/logo.gif" align="absmiddle" border=0 width=12 height=12></td><td style="font-size:12px;color:#F4F4F4;font-weight:bold" width=100% align=left>  Z-Tips</td><td align=right valign=top><img src="http://www.webjx.com/pic/button-Close.gif" onclick=javascript:HideFlyBar() alt="关闭X" title="关闭X" width=11 height=11 border=0 align="absmiddle" onmouseover="divFlyBar.style.cursor='hand';" onmouseout="divFlyBar.style.cursor='move';"></td></tr></table></td></tr>

[1] [2] 下一页 




上一篇:WEB标准的常见问题

下一篇:兼容标准XHTML的浮动层特效实现

相关文章:
·如何实现局域网打印机共享
·水晶报表的jsp实现
·用Excel实现定时提醒
·利用VB6.0实现五线谱作曲工具
·Flash教程:加载图片按比例显示的实现方法
·Velocity 的应用示例
·VB实现程序的隐形
·一个只使用Winsock控件实现的Telnet程序
·C++ Builder下数据库报表Master/Detail关系功能的实现
·asp.net中调用javascript函数实现多功能日期控件示例
相关软件:
·TCP-IP详解卷2:实现
·TCP-IP详解卷二:实现
·Cisco 3640实现VOIP配置
·简易灌水器的实现
·操作系统&设计与实现
·内置对象实现超酷日历
·Aerial Antics(实现你的飞翔梦) V1.0
·ASP.NET下MVC设计模式的实现
·三层交换机特点与实现分析
·C语言标准与实现

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.viphot.com
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.viphot.com All Rights Reserved. 鄂ICP备05000083号Powered by:viphot