wanglihu
- 浏览: 909942 次
- 性别:
- 来自: 黑龙江
-
文章分类
- 全部博客 (209)
- struts1 (3)
- hibernate3 (19)
- java (13)
- spring2 (5)
- netBeans (1)
- eclipse (1)
- JSF (1)
- DIV+CSS篇章 (1)
- jFreeChart+Oracle之曲线，柱状及饼状图的实现 (1)
- JSF知识与技巧 (3)
- Oracle数据类型的介绍与比较 (2)
- J2EE (2)
- Ajax技术 (4)
- javaScript技术 (25)
- struts2 (16)
- C/C++程序设计 (1)
- oracle系统学习 (29)
- 算法分析 (0)
- Linux实践 (7)
- extjs开发经验 (13)
- flex开发总结 (1)
- FusionCharts总结 (0)
- 高级数据库总结 (0)
- SVG拓扑图开发总结 (0)
- CSS (1)
- CSS使用简介 (1)
- SVG (0)
- DOJO (0)
- Junit测试 (0)
- lucene (24)
- solr (6)
- tokyo tyrant 技术 (7)
- Html5 (1)
- 算法与数据结构 (0)
- 物联网相关技术学习 (0)
- UI设计 (1)
- webservice (0)
- Android (5)
- hibernate4 (3)
- solrcloud (0)
- dorado5 (0)
- dorado7 (0)
- elasticsearch (0)
- GWT (0)
- node.js (0)
- 并发编程 (1)
- 大数据 (1)
- 项目经验 (5)
最新评论
-
cs261244787：
楼主好人！ 平安
struts2,hibernate4,spring3配置时问题汇总及解决办法 -
wxluck666：
我也赞一个 很有用
struts2,hibernate4,spring3配置时问题汇总及解决办法 -
wxluck666：
我也赞一个 很有用
struts2,hibernate4,spring3配置时问题汇总及解决办法 -
xinsiyou：
牛逼，就是样式被搞没了
JS实现选项右移，左移，向上，向下调整顺序 -
unnamed__：
这代码风格就像一坨翔
java获取数据库的列名，类型等信息
希望给点评论什么的，也便于本人重新编辑该文章，别拍拍屁股走人啊！哈哈！
HTML网页中div如何挡住select，有好多需求中提出这样的问题。再三研究并寻找解决方法，最后从网上搜索到这样的信息：说是可以用iframe做底，挡住select，也就达到了div挡住select的效果。
于是本人喜出望外，急于完成工作任务，查了不少资料，也调试了很长时间，最后还真好用了。
这两天空闲时间就将自己实现该功能的代码贴出来供大家参考，以便更快捷的找到问题的突破口。下面就是实现用户信息录入页面时的源代码：
HTML网页中div如何挡住select，有好多需求中提出这样的问题。再三研究并寻找解决方法，最后从网上搜索到这样的信息：说是可以用iframe做底，挡住select，也就达到了div挡住select的效果。
于是本人喜出望外，急于完成工作任务，查了不少资料，也调试了很长时间，最后还真好用了。
这两天空闲时间就将自己实现该功能的代码贴出来供大家参考，以便更快捷的找到问题的突破口。下面就是实现用户信息录入页面时的源代码：
<html>
<head>
<title>用户信息录入页面</title>
<script type="text/javascript">
function setContent(flag) {
var content1 = document.getElementById('menu');
var content2 = document.getElementById('back');
if (flag){
content1.style.display = "block";
content2.style.display = "block";
content2.style.width = content1.offsetWidth;
content2.style.height = content1.offsetHeight;
content2.style.top = content1.style.top;
content2.style.left = content1.style.left;
content2.style.zIndex = content1.style.zIndex - 1;
}
else {
content1.style.display = "none";
content2.style.display = "none";
}
}
</script>
</head>
<body>
<legend ACCESSKEY=C>请认真填写您的用户信息及资料:<a href="#" onclick="setContent(true)">展开</a>
<a href="#" onclick="setContent(false)">收起</a> </legend>
<div style="z-index:3;text-align:left">
<legend ACCESSKEY=A>国 籍：</legend>
<Select name="city">
<option value="1">请选择国籍</option>
<option value="2">中国</option>
<option value="3">美国</option>
<option value="4">俄罗斯</option>
<option value="5">日本</option>
<option value="6">朝鲜</option>
<option value="7">韩国</option>
<option value="7">新加坡</option>
<option value="7">加拿大</option>
<option value="7">澳大利亚</option>
<option value="7">法国</option>
</Select>
</div>
<fieldset id="menu" style="z-index:999;width:500;overflow-x:auto;height:100;overflow-y:auto;position:absolute;display:none;border:1px dotted #6699FF;background:#E5F0FF">
<P>
<label ACCESSKEY=E>
<input type=radio name="zjlx" value="152628198307095678">身份证
</label>
<label ACCESSKEY=F>
<input type=radio name="zjlx" value="152628198307095678">出国护照<br>
</label>
<label ACCESSKEY=H>
用户名： <input type=text name="userName"> <br>
</label>
<label ACCESSKEY=M>
密 码： <input type=text name="userName"> <br>
</label>
<label ACCESSKEY=N>
E_mail： <input type=text name="userName"> <br>
</label>
</P>
</fieldset>
<iframe id="back" src="" scrolling="no" frameborder="0" style="position:absolute;top:0px;left:0px;display:none">
</iframe>
</body>
</html>
分享到：
发表评论
-
JQuery zTree插件
2012-01-10 16:55 1214JQuery zTree插件。好东西！很实用！ -
JavaScript在IE浏览器和Firefox浏览器中的差异总结
2011-12-27 10:17 13491.HTML对象的 id 作为对象名的问题 IE：HTML ... -
javascript继承方式
2011-12-24 15:41 10441.对象冒充 引用 functio ... -
javascript中定义对象方式
2011-12-24 15:10 13411.在javascript中，可以动态添加对象的属性，也可以动 ... -
js原始数据类型、强制类型转换、typeof运算符的使用实例
2011-12-24 15:10 3191js中存在5中原始数据类型： 1.Undefined（未定义 ... -
js中Function对象
2011-12-24 15:10 29181.Undefined对象只有一个 ... -
js全选与反选、收缩与展开
2011-12-23 10:19 1105<!DOCTYPE HTML PUBLIC " ... -
js验证数字
2011-12-23 10:02 1184<script type="text/jav ... -
Cookie对象使用
2011-12-23 10:02 10381.cookie对象： 是一 ... -
javascript内置对象
2011-12-23 08:32 1291图像对象： 导航对象： 窗口对象： 格式 ... -
javascript定时器
2011-12-23 08:32 11211.setTimeout():指定在一段 ... -
javascript事件控制
2011-12-21 08:35 9781.实现类似<a>标签的功能 <scrip ... -
javascript自定义对象
2011-12-21 08:35 1011实例： <script type="text ... -
javascript中字符串的使用方法
2011-12-21 08:34 10661.字符串定义： var str = new Stri ... -
javascript内置函数
2011-12-20 16:21 10481.函数说明： join（）：如何使用 join() 方法 ... -
javascript内置的默认对象
2011-12-20 16:08 11981.日期对象（Date）: <script typ ... -
javascript对象创建方式
2011-12-20 15:38 9411.with使用方式。 <script type=& ... -
javascript深度解析
2011-12-20 15:23 1301一.概述 javascript是网景公司开发的基于客户端浏览 ... -
html滑动门实现
2011-12-21 08:34 1288滑动门实现 -
收集的非常不错的js脚本
2008-09-25 11:27 14821 >屏蔽功能类 1.1 ...
相关推荐
div+css+js实现菜单的收缩与展开! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下
见过Ext的panel滑动隐藏效果（点击panel右上角小三角图标实现的那个效果）吗，该功能是通过深入解读Ext源码后，实现的div滑动隐藏效果，代码简洁，极为经典，方便追求效果的前台爱好者们研究。 想要的快来下，5分...
Jquery实现的列表内容逐渐展开与收缩，展开速度可调，适合多组列表，无需id即可循环，代码简洁。
本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下： 这是一个层伸缩与展开的特效代码，带有点动画效果，缓慢展开，DIV+JS联合打造，看上去还不错。不受内容约束，收缩与展开的...
采用原生的JavaScript实现的图片收缩与展开效果；其中采用的图片均来自网络，希望和大家一起分享学习web前端。
介绍了js实现收缩菜单效果实例代码，有需要的朋友可以参考一下
主要介绍了vue实现收缩展开效果的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文实例讲述了javascript使用substring实现的展开与收缩文字功能。分享给大家供大家参考，具体如下： 效果如图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
Js CSS实现图文展开收缩的导航菜单特效，包括了折叠、展开的特效，支持鼠标的悬停动画效果，有点像Flash菜单那样的平滑体验，传说中，这叫做手风琴菜单，一折一折看上去像手风琴的琴键那样，鼠标放到琴键上就立即...
最近在做项目时，发现CSS3中关于动画的技术，自己很少运用在项目中，平时一些列表块的收缩和展开动画效果，几乎都是使用 display 的 none 和 block，或者 visibility 的 hidden 和 visible 来进行控制。...
主要介绍了Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
JS+HTML实现网页竖型缓冲展开关闭菜单效果，类似展开关闭QQ好友效果，代码清晰，含调用方法注释
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。 循环列表，html: (item,index) key=index> <p class=p ref=liCon>{{item.content}} (item,index)> !item.openFlag>【展开】...
非常精美的一款CSS3图标菜单下拉展开收缩切换特效，展开时还有弹性动画效果，纯CSS3实现，不含任何js代码。
主要介绍了js实现可以点击收缩或张开的悬浮窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
主要介绍了vue和react等项目中更简单的实现展开收起更多等效果示例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下