点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧 1、遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的css是这样写的吧:应该这样:需要注意的是这几个参数的意思:RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 2、半遮罩层里面的内容可以上下滑动 感觉挺好玩的 /笑哭 修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦 接下来就是代...
1.css设置透明度 透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的,IE使用滤镜filter的alpha属性,firefox和其它浏览器不支持滤镜,它们使用opactiy属性设置透明度,下面示例设置透明度为30%: IE:filter: alpha(opacity:30); firefox:opacity(0.3); 2.使用js设置透明度 为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置。下面是一段示例代码:代码如下:var alpha = 30; //透明度值变量 va...
CSS+JavaScript 实现原理: 创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的div,这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。<!DOCTYPE html> <html> <head> <meta cha...
这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白。下面就是全部代码,复制到HTML中就可以运行的。<!DOCTYPE html> <style> #mask {position:fixed;width:100%;top:0px;left:0px;_position:absolute;_top:expression(documentElement.scrollTop);background:rgba(0,0,0,0.5);background:tra...
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助<div > <h4><span>现在注册</span><span >关闭</span></h4> <p> <label> 用户名</label> <input type="text" class="myinp" onmouseover="this.style.border=1px solid #f60" onfoucs="this.style.border=1px solid #f60" onblur="this.style.border=1px solid #ccc" /> </p>...
本文实例讲述了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果。分享给大家供大家参考,具体如下: <!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> <title>JavaScript弹出DIV层,页面背景渐变成半透明</title> <style> html,body{font-size:12px;margin:0px;height:100%;} .mesWindow{b...
本文实例讲述了jQuery实现热气球动画背景登录框。分享给大家供大家参考。具体如下: jQuery热气球动画背景登录框是一款动态半透明背景的后台登录界面样式效果代码。页面效果简洁大方,是一款非常实用的特效代码,值得大家学习。 运行效果图:-------------------查看效果 下载源码-------------------小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的jQuery实现热气球动画背景登录框代码如下<head> <meta h...
今天我们来分享一款基于jQuery的横向手风琴图片轮播焦点图特效源码。手风琴效果即图片一张张层叠在一起,鼠标滑过图片时即可展开完整的图片,这样的效果很常见,所以应用也很广泛,大家可以试试这款jQuery焦点图。 运行效果图: ---------------------------------效果演示 源码下载---------------------------------为大家分享的jQuery半透明抽屉式手风琴代码如下<head> <meta http-equiv="Content-Type" content="text/html; ch...
本文实例讲述了JavaScript实现动画打开半透明提示层的方法。分享给大家供大家参考。具体如下: <!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>DOM半透明提示层</title> <style type="text/css"> body,span,d...
默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果同时出现一些文字介绍使用方法: 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可 (js、图片采用绝对路径,不建议修改)代码如下: $(function(){ $(.sgw_img dt).hover(function(){ $(this).children(.box).stop(true,true).delay(100).animate({top:0,opacity:0.8},300); },functio...
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供大家参考。具体实现方法如下:代码如下:<!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>js+CSS弹出居中的背景半透明div层</title> <style...
本文实例讲述了js实现九宫格图片半透明渐显特效的方法。分享给大家供大家参考。具体实现方法如下:代码如下:<html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible { FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- function high(which2){ theobject=which2 highlighting=setInterval("highlightit(theobject)",50) } function low(which2){ clearInterval(highl...
上一章我介绍了遮罩的页面可增加部分区域编辑模块,这章将介绍父页面显示遮罩层,弹出半透明状态的dialog。dialog即弹出的子页面,div。 效果图如下: 具体代码实现如下: 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="D...
代码如下:<!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> * { margin: 0; padding: 0; font-size: 12px; } html, body { height: 100%; width: 100%; } #content { background: #FFFF...
该 DIV是半秀明状态,这样可以看到背景也可以衬托文字,当鼠标放到文字上的时候,DIV层彻底不透明,文字清淅显示出来,一般这种效果都是要配合JavaScript的,这样兼容性会更好。 图片与文字结合的半透明效果,鼠标移上不透明 .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(//files.jb51.net/demoimg/200910/wall.gif) no-repeat; width:300px; height:235px;} .in_box{backg...