- 浏览: 457123 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuan_bin1990:
您好,请问下demo如何运行啊,准备研究研究,但不知道入口啊。 ...
ssh2(struts2+spring2.5+hibernate3.3)自动生成代码程序 -
luyulong:
[b][/b][i][/i][ ...
jQuery进度条插件 jQuery progressBar -
txin0814:
mark..
读取文件目录 -
vurses:
[align=center][color=red][size= ...
include 与 jsp:include区别 -
Roshan2:
http://lijiejava.iteye.com/blog ...
Spring AOP 入门实例
<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*弹出层的STYLE*/ html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #ff6; border: 1px solid #f90; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index:99; width: 300px; height: 120px; left:50%;/*FF IE7*/ top: 50%;/*FF IE7*/ margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */ margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ margin-top:0px; position:fixed!important;/*FF IE7*/ position:absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ } .bg { background-color: #ccc; width: 100%; height: 100%; left:0; top:0;/*FF IE7*/ filter:alpha(opacity=50);/*IE*/ opacity:0.5;/*FF*/ z-index:1; position:fixed!important;/*FF IE7*/ position:absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ } /*The END*/ </style> <script type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; } </script> </head> <body> <div id="popDiv" class="mydiv" style="display:none;">恭喜你!<br/>你的成绩为:60分<br/> <a href="javascript:closeDiv()">关闭窗口</a></div> <div id="bg" class="bg" style="display:none;"></div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div style="padding-top: 20px;"> <input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" /> </div> </body> </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" /> <title>JavaScript 仿LightBox内容显示效果</title> </head> <body> <script> var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var Each = function(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; var Contains = function(a, b){ return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); } var OverLay = Class.create(); OverLay.prototype = { initialize: function(options) { this.SetOptions(options); this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]); this.Color = this.options.Color; this.Opacity = parseInt(this.options.Opacity); this.zIndex = parseInt(this.options.zIndex); with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; } if(isIE6){ this.Lay.style.position = "absolute"; //ie6设置覆盖层大小程序 this._resize = Bind(this, function(){ this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; }); //遮盖select this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>' } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Lay: null,//覆盖层对象 Color: "#fff",//背景色 Opacity: 50,//透明度(0-100) zIndex: 1000//层叠顺序 }; Extend(this.options, options || {}); }, //显示 Show: function() { //兼容ie6 if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); } //设置样式 with(this.Lay.style){ //设置透明度 isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100; backgroundColor = this.Color; display = "block"; } }, //关闭 Close: function() { this.Lay.style.display = "none"; if(isIE6){ window.detachEvent("onresize", this._resize); } } }; var LightBox = Class.create(); LightBox.prototype = { initialize: function(box, options) { this.Box = $(box);//显示层 this.OverLay = new OverLay(options);//覆盖层 this.SetOptions(options); this.Fixed = !!this.options.Fixed; this.Over = !!this.options.Over; this.Center = !!this.options.Center; this.onShow = this.options.onShow; this.Box.style.zIndex = this.OverLay.zIndex + 1; this.Box.style.display = "none"; //兼容ie6用的属性 if(isIE6){ this._top = this._left = 0; this._select = []; this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); }); } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Over: true,//是否显示覆盖层 Fixed: false,//是否固定定位 Center: false,//是否居中 onShow: function(){}//显示时执行 }; Extend(this.options, options || {}); }, //兼容ie6的固定定位程序 SetFixed: function(){ this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px"; this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px"; this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft; }, //兼容ie6的居中定位程序 SetCenter: function(){ this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px"; this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px"; }, //显示 Show: function(options) { //固定定位 this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute"; //覆盖层 this.Over && this.OverLay.Show(); this.Box.style.display = "block"; //居中 if(this.Center){ this.Box.style.top = this.Box.style.left = "50%"; //设置margin if(this.Fixed){ this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px"; this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px"; }else{ this.SetCenter(); } } //兼容ie6 if(isIE6){ if(!this.Over){ //没有覆盖层ie6需要把不在Box上的select隐藏 this._select.length = 0; Each(document.getElementsByTagName("select"), Bind(this, function(o){ if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); } })) } //设置显示位置 this.Center ? this.SetCenter() : this.Fixed && this.SetFixed(); //设置定位 this.Fixed && window.attachEvent("onscroll", this._fixed); } this.onShow(); }, //关闭 Close: function() { this.Box.style.display = "none"; this.OverLay.Close(); if(isIE6){ window.detachEvent("onscroll", this._fixed); Each(this._select, function(o){ o.style.visibility = "visible"; }); } } }; </script> <style> .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;} .lightbox dt{background:#f4f4f4; padding:5px;} </style> <dl id="idBox" class="lightbox"> <dt id="idBoxHead"><b>LightBox</b> </dt> <dd> 内容显示 <br /><br /> <input name="" type="button" value=" 关闭 " id="idBoxCancel" /> <br /><br /> </dd> </dl> <div style="margin:0 auto; width:800px; height:500px; border:1px solid #000000;"> <input type="button" value="关闭覆盖层" id="btnOverlay" /> <input type="button" value="黑色覆盖层" id="btnOverColor" /> <input type="button" value="全透覆盖层" id="btnOverOpacity" /> <input type="button" value="定位效果" id="btnFixed" /> <input type="button" value="居中效果" id="btnCenter" /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <select> <option>覆盖select测试</option> </select> <input name="" type="button" value=" 打开 " id="idBoxOpen" /> </div> <script> var box = new LightBox("idBox"); $("idBoxCancel").onclick = function(){ box.Close(); } $("idBoxOpen").onclick = function(){ box.Show(); } $("btnOverlay").onclick = function(){ box.Close(); if(box.Over){ box.Over = false; this.value = "打开覆盖层"; } else { box.Over = true; this.value = "关闭覆盖层"; } } $("btnOverColor").onclick = function(){ box.Close(); box.Over = true; if(box.OverLay.Color == "#fff"){ box.OverLay.Color = "#000"; this.value = "白色覆盖层"; } else { box.OverLay.Color = "#fff" this.value = "黑色覆盖层"; } } $("btnOverOpacity").onclick = function(){ box.Close(); box.Over = true; if(box.OverLay.Opacity == 0){ box.OverLay.Opacity = 50; this.value = "全透覆盖层"; } else { box.OverLay.Opacity = 0; this.value = "半透覆盖层"; } } $("btnFixed").onclick = function(){ box.Close(); if(box.Fixed){ box.Fixed = false; this.value = "定位效果"; } else { box.Fixed = true; this.value = "取消定位"; } } $("btnCenter").onclick = function(){ box.Close(); if(box.Center){ box.Center = false; box.Box.style.left = box.Box.style.top = "20%"; box.Box.style.marginTop = box.Box.style.marginLeft = "0"; this.value = "居中效果"; } else { box.Center = true; this.value = "重新定位"; } } </script> </body> </html>
发表评论
-
javascript两种渐变效果进度条的实现
2010-09-29 17:41 1228<html> <head> < ... -
javascript 动态添加删除控件
2010-09-29 17:29 1649<!DOCTYPE HTML PUBLIC " ... -
判断浏览器类型
2010-07-20 17:56 1007var userAgent = navigator.userA ... -
fckeditor unterminated string literal
2010-07-07 19:36 2053fckeditor 脚本出现unterminated stri ... -
JSP页面刷新重复提交数据解决方法总结
2010-07-01 16:52 2057jsp页面: <%@ page contentType ... -
jsp统计在线人数和在线注册人数
2010-06-16 21:13 1251一、统计在线人数 1.监听器 Java代码 ... -
jQuery进度条插件 jQuery progressBar
2010-05-28 17:50 16005JQuery Progress Bar是基于JQuery开发的 ... -
Page-taglib-2.0
2010-05-27 14:11 1255Page-taglib-2.0 1、拷贝pager-tagli ... -
四步学习Meta标签
2010-04-14 09:59 665一直以来有很多人却忽 ... -
JavaScript使用cookie,参数设置,说明;读取,写入,删除函数
2010-04-13 13:07 1637cookie概述在上一节,曾 ... -
getRequestDispatcher()与sendRedirect()区别
2010-04-12 10:05 10851.request.getRequestDispatcher( ... -
Web中的相对路径与绝对路径
2010-04-10 08:35 11211.基本概念的理解 ... -
常用正则表达式
2010-04-02 09:14 695"^\d+$" //非负整数(正整数 + ... -
控制TD中图片的大小
2010-04-01 10:51 2066<body> <table& ...
相关推荐
parent:子窗口的父窗口对象参数值:此参数只用在弹出的窗口中再弹出子窗口时指定父窗口对象,注意如果2层弹出窗口都有遮罩层则一定要加此参数。 dgOnLoad:窗口加载后执行的函数参数值:注意此参数值一定要为函数...
1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...
1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...
5.35 弹出一个居中显示的窗口... 137 5.36 弹出一个全屏幕窗口... 138 5.37 在弹出的窗口中显示菜单... 139 5.38 在弹出的窗口中显示标准按钮栏... 140 5.39 在弹出的窗口中显示地址栏... 141 5.40 在弹出的...
• 10.9.htm 鼠标感应 弹出警告框 • 10.10.htm 鼠标感应 渐显图片 • 10.11.htm 禁用鼠标右键 第11章(\第11章) • 11.1.htm 省略window的alert()方法 • 11.2....
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
• 10.9.htm 鼠标感应 弹出警告框 • 10.10.htm 鼠标感应 渐显图片 • 10.11.htm 禁用鼠标右键 第11章(\第11章) • 11.1.htm 省略window的alert()方法 • 11.2.htm 未...
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
让你短时间内由一名菜鸟到高手绝对没问题! 由于权限有限,分3部份下载 PHP程序开发范例宝典 内容提要 《PHP程序开发范例宝典》全面介绍了应用PHP进行网站开发的各种技术和技巧。《PHP程序开发范例宝典》分为20章...