透明框

就是相关控件的显示(展开)

opacity是透明度的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#fade {
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
filter:alpha(opacity=80);
}
#light{
display:none;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
padding:16px;
border:3px solid orange;
background-color:#3333cc;
z-index:1002;
overflow:auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var linkbt=document.getElementById("linkbt");
var light=document.getElementById(‘light‘);
var fade=document.getElementById(‘fade‘);
var closebt=document.getElementById("closebt");
linkbt.onclick=function(){
light.style.display=‘block‘;
fade.style.display=‘block‘;
}
closebt.onclick=function(){
light.style.display=‘none‘;
fade.style.display=‘none‘;
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="linkbt"> 点击这里打开窗口</a>
<div id="light"><a href="javascript:void(0)" id="closebt">关闭窗口</a></div>
<div id="fade""></div>
</body>
</html>

  

时间: 2024-12-27 20:51:12

透明框的相关文章

[调整] Firemonkey iOS 原生 Edit 改变框色或透明框

说明:iOS 原生 Edit 透明框 方法: 效果: 说明:iOS 原生 Edit 设定框色 适用:Berlin Firemonkey 代码修改说明: 请将源码 FMX.Edit.iOS.pas 复制到自己的工程目录里,再进行修改. 代码内 {+++> 代表我增加的代码 代码内 {---> 代表我删除的代码 未来新版 Delphi 可以自己将 {+++> {---> 移植到新版代码内 constructor TiOSNativeEdit.Create; begin inherite

网页设计中透明效果的使用技巧

在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像“变薄”或者降低饱和度,使颜色变浅透明,这样下个图层的内 容就能穿透显示出来.这种方法如果用好了,效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这 么做可能会影响页面的可读性.要是框和文本的透明度不对,更可能会影响到整体的设计. 下文是一些注意事项以及巧妙运用透明效果的成功案例. 用“透明效果”来制造对比 使 用透明效果最大的优点是可以形成对比.设计者可以在图

CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器

提示工具 提示框在鼠标移动到特定的元素上显示 设置提示框的位置 给提示框添加箭头 提示框的淡入效果 提示框美化 图片廓 响应式图片廓 图像透明 创建透明图像——悬停效果 ———鼠标放置后———>  创建一个具有文本的拥有背景图像的透明框  图像拼合技术 图像拼合————单个图像的集合 [有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求] 图像拼合会降低服务器的请求数量,并节省带宽 与其使用3个独立的图像,不如使用这种单个图像 ——————>   图像拼合的悬停效果 媒体类型 指定

效果和兼容问题

/* 查看更多收缩 延生 js效果*/ function showAllFriendly(){ $("#allFriendly").show(); $("#someFriendly").hide();} function hideSomeFriendly(){ $("#someFriendly").show(); $("#allFriendly").hide();} /*新闻段落出现省略号*/width:250px;overf

CSS学习(五)

导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的.在我们的例子中我们将建立一个标准的HTML列表导航栏. 导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义: <ul> <li><a href="default.asp">Home</a></li> <l

Js特效之放大镜(淘宝商品展示)

放大镜具体效果为:一张图片,鼠标移上去出现一个半透明的框,随着鼠标移动,半透明框随着鼠标移动,且鼠标始终处于半透明框的中间,同时在特定区域显示被半透明框覆盖图片部分的放大部分.如下图所示: 分析:要实现如图效果,需要处理两方面的事件. 问题一:要获取鼠标位置,并且鼠标始终处于半透明框的中心位置:且半透明框可以随鼠标移动而移动. 解决一:可以使用来获取鼠标的位置,并且处理兼容性问题,半透明框绝对定位,可以通过控制left和top值来控制它的移动,可以通过减法来使鼠标位置处于框的中心,并且可以通过最

【前端优化之渲染优化】大屏android手机动画丢帧的背后

前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程H5站点的优化,在这方面有一些心得,但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节. 携程做优化的时候整个重心基本放到了尺寸的缩减,和宇果的交流过程中他提出了渲染优化,其实渲染优化无非是减少回流,对于减少回流我们也有一些概念,我一直认为这个事情应该业务开发关注而不是框架关注(事实上框架也无

css3实现焦点移动文本特效

不得不说css3很强大,至少在我看到这种效果的时候是这么感叹的! 下面就来按步骤揭露这种效果的实现方法. step.1 分析效果,大致可以知道这是由上下两层div覆盖实现的,并且上层是我们看到的清楚的那一层,暂定为A层,模糊的定位B层. A层可见区域固定宽度并且左右移动,B层仅仅给出模糊效果,这样就可以做成这种特效. 这里的A层是需要注意到部分,他本质由两部分组成:1,从左向右移动的透明框.2,从右向左移动的清楚文字. 透明框在移动的同事,里面的文字也在相对于它进行相反方向的移动. setp.2

Windows MFC 全局模态 实现 (二)

上一篇 Windows MFC 全局模态 实现 介绍了一下第一种方法,但是这个方法有个问题是,即使在对话框外不能点击,框外点击鼠标,当前需要操作的窗口也是失去了焦点的.这样用户体验影响比较严重.而且还有个问题是,如果要适配32位.64位系统,要达到全局模态(禁止鼠标效果)需要32.64位两种库,而且要分别被32.64位系统调用.使用条件限制比较严格. 所以这里记录一下使用透明窗口的实现方法: 1.工程中插入一个对话框 2.设置对话框属性 去掉Title bar的勾 3.增加一个OnInitDia