- 浏览: 245361 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (221)
- A序 (4)
- 系统学习(读书笔记) (5)
- Computer-base (14)
- RFC-协议规范 (9)
- OS-windows (3)
- OS-linux (10)
- 项目管理-需求设计 (2)
- 设计模式 (1)
- Java-基础-抽象规范 (15)
- Java-基础-core-code (15)
- Java-Thread (15)
- JAVA-stream 流 (1)
- JAVA-socket (13)
- JAVA-SSL (5)
- JAVA-RMI-JMX-OSGI (7)
- java-web (6)
- 工具 (19)
- W3C (16)
- DB (12)
- 读书笔记 (5)
- 中间件 (1)
- C/C++ (1)
- JAVA-JAXB (3)
- Java-UI (1)
- JAVA命令 (1)
- JVM实战 (1)
- java-base (3)
- maven (1)
最新评论
-
Nabulio:
厉害
tomcat 源码学习 -
zbz:
例子很简单,可是怎么设置访问账号和密码呢?注释掉的那段不起作用 ...
jmx 实例--最简单的例子 -
zk302:
格式可以优化下
sql-经典例子练习 -
tuspark:
eclipse的访问控制图标,可以看这篇《eclipse的访问 ...
Eclipse(四)常用设置 -
xlshl43:
流比呀。。。但这排版看的有点蛋疼。。。
Java核心代码(二)Class loader
事件
<body onmousedown="show_coords(event)">
function show_coords(ev){
alert("X 坐标: " + ev.clientX + ", Y 坐标: " + ev.screenX)
}
遮罩滚动层
<html>
<head>
<script language="javascript" type="text/javascript" >
var timerID = 0;//必须的
function StartGO(){
var bgObj0=document.createElement("div");
bgObj0.style.position="absolute";
bgObj0.style.backgroundColor="#eeeeee";
if(document.all){
bgObj0.style.filter = "alpha(opacity=50)";
}else{
bgObj0.style.MozOpacity = 0.5;
bgObj0.style.opacity = 0.5;
}
bgObj0.style.top = "0px";
bgObj0.style.left = "0px";
bgObj0.style.width = "100%"
var s_height=document.body.scrollHeight;
if(s_height<window.screen.availHeight){
s_height=window.screen.availHeight;
}
bgObj0.style.height=s_height+"px"//设置高度
bgObj0.style.zIndex = 1000;
var bgObj=document.createElement("div");
bgObj.style.position="absolute";
bgObj.style.backgroundColor="#ff0000";
bgObj.style.top = "300px";
bgObj.style.left = "300px";
bgObj.style.width = "300px"
bgObj.style.height = "300px"
bgObj.style.zIndex = 1001;
document.body.appendChild(bgObj0);
document.body.appendChild(bgObj);
//关闭按钮//也可以这样写啊?
var c = document.createElement("div");
c.innerHTML = "关闭";
c.style.cssText = "text-decoration:underline; cursor:pointer;";
c.onclick = function(){
document.body.removeChild(bgObj);
document.body.removeChild(bgObj0);
clearInterval(timerID);//clearInterval() 方法可取消由 setInterval() 设置的 timeout。
document.body.scrollTop="0px";
};
bgObj.appendChild(c);
clearInterval(timerID);
//clearInterval() 方法可取消由 setInterval() 设置的 timeout。
timerID = setInterval(function(){move(bgObj);}, 10);
//timerID = setInterval(move,10,bgObj);等效于上面的
alert(timerID);//如果页面不刷新timerID为2,3,4,5递增的
//setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
}
function move(obj){
if(obj){
obj.style.top = document.body.scrollTop +300+ "px";
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body >
<div id="content">
<input type="button" value="OK" id="btnOK" onclick="StartGO()"/> <br>
大家好!<br>
底部有数字内容!
滚动遮罩层
指定遮罩层
</div>
<div style="margin-top:1000px">123</div>
</body>
</html>
js层:
<html>
<head>
<script language="javascript" type="text/javascript">
function openFloat(obj) {
// alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop); //[object HTMLDivElement]160-262
floatArea = document.getElementById("ok");
var leftpos = 0,toppos = 0;
var pObject = obj.offsetParent;
//if (pObject){
//leftpos += pObject.offsetLeft;
//toppos += pObject.offsetTop;
//alert( pObject+pObject.offsetLeft+"-"+pObject.offsetTop);//[object HTMLBodyElement]0-0
//alert(obj+obj.offsetLeft+"-"+obj.offsetTop); //[object HTMLInputElement]190-292
//}
//alert(leftpos);
while(pObject){//必须的,能否合并于if,用coupon_release.html测试??????????
leftpos += pObject.offsetLeft;
toppos += pObject.offsetTop;
alert(pObject+leftpos+"-"+pObject.offsetLeft);
pObject = pObject.offsetParent;
}
//alert(0);
//alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]160-262
floatArea.style.left = (leftpos) + "px";
alert(floatArea.style.left);
floatArea.style.top = (obj.offsetTop + toppos + obj.offsetHeight - 1) + "px";
//alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]190-312
floatArea.innerHTML="<a href='javascript:closeFloat();'>关闭</a><br>test层中表单<br>"
+"<form><input type='text' name='name' id='name'/><br></form>"
floatArea.style.width = "300px";
floatArea.style.height = "300px";
floatArea.style.border = "#ff0000 1px solid";
floatArea.style.background="#eeeeee";
floatArea.style.display = "block";
}
function closeFloat() {
floatArea = document.getElementById("ok");
floatArea.innerHTML = "";
floatArea.style.display = "none";
}
</script>
</head>
<body >
<from style="position:relative;float:left;margin-left:50px;margin-top:50px;border:#ff0000 1px solid">
<h1>测试DIV层</h1>
<input type="text" name="name" id="name"/><br>
<div style="position:relative;float:left;margin-left:30px;margin-top:30px;border:#ff0000 1px solid">
<div id="sub" style="position:relative;float:left;margin-left:100px;margin-top:100px;border:#ff0000 1px solid">
<input type="button" value="test" onclick="openFloat(this)"/><br>
hello,wnj<br>
</div>
<div id="ok" style="position:relative;background-color:#eeeeee;display:none"></div>
</div>
</from>
</body>
</html>
发表评论
-
json-总结
2012-11-18 19:31 1132JSON: com.abchi ... -
jquery-总结
2012-11-18 19:32 951jQuery的另一好处。控制与html分离 ... -
ajax-总结
2012-11-18 19:33 706ajax相关技术: DOM(Docu ... -
html-dom-总结
2012-11-18 19:34 990-------------------------b ... -
DOM-总结
2012-11-19 08:25 889DOM 是 W3C(万维网联盟) 的推荐标准。 ... -
javascript-例子
2012-11-15 00:12 873/** * 工具对象 */ comet.uti ... -
javascript-总结
2012-11-15 00:03 788JavaScript 是一种脚本语言 ... -
XQuery-总结
2012-11-19 08:26 662XQuery XML Query相对 ... -
DTD-总结
2012-11-19 08:26 937DTD(文档类型定义) 每一个 XML ... -
xpath-总结
2012-11-19 08:26 805XPath 读取XML的语言。XQu ... -
xml-总结
2012-11-19 08:26 879XML 指可扩展标记语言(EXtensible Mark ... -
css 总结
2012-11-15 00:03 911样式三种使用方式 外部样式表 ... -
html-总结
2012-11-15 00:02 9300、文章结构______________________ ... -
w3c-概述
2012-11-15 00:02 1014W3C是英文 World Wide Web Consor ... -
xsd(XML Schema Definition)
2012-11-05 12:09 1027XSD(XML Schema Definition) ...
相关推荐
Javascript API、javaScript常用特效1-5、JavaScript使用手册、程序员常用JavaScript特效
特效 JavaScript-消息滑动 特效 JavaScript-消息滑动
javascript经典特效---下雨.rar javascript经典特效---下雨.rar javascript经典特效---下雨.rar
javascript特效javascript特效javascript特效javascript特效javascript特效javascript特效javascript特效javascript特效
文字特效.rar文字特效.rar文字特效.rar文字特效.rar文字特效.rar文字特效.rar 文字特效.rar文字特效.rar文字特效.rar文字特效.rar文字特效.rar文字特效.rar
javascript经典特效---天女散花.rar javascript经典特效---天女散花.rar javascript经典特效---天女散花.rar
javascript实例应用---流行特效类.rarjavascript实例应用---流行特效类.rarjavascript实例应用---流行特效类.rarjavascript实例应用---流行特效类.rar
javascript经典特效---万年历.rar javascript经典特效---万年历.rar javascript经典特效---万年历.rar
javascript实例应用---图片特效类.rarjavascript实例应用---图片特效类.rarjavascript实例应用---图片特效类.rarjavascript实例应用---图片特效类.rar
javascript实例应用---菜单特效类.rarjavascript实例应用---菜单特效类.rarjavascript实例应用---菜单特效类.rarjavascript实例应用---菜单特效类.rar
javascript实例应用---按钮特效类.rarjavascript实例应用---按钮特效类.rarjavascript实例应用---按钮特效类.rarjavascript实例应用---按钮特效类.rar
javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 ...
javascript实例应用---页面特效类.rarjavascript实例应用---页面特效类.rarjavascript实例应用---页面特效类.rar
javascript经典特效---扫雷程序.rar javascript经典特效---扫雷程序.rar javascript经典特效---扫雷程序.rar
javascript经典特效---漫天飞雪.rar javascript经典特效---漫天飞雪.rar javascript经典特效---漫天飞雪.rar