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...
废话不多说了，直接给大家写js代码了，代码如下所示: <!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>js全屏透明遮罩锁屏效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> #pageO...
平时工作中写网页涉及的运动往往都非常简单，比如改变宽高，透明度，位置，是最常用的几种形式，为了省事，整合了下，于是就有了下面这个东东： 兼容：IE系列、chrome、firefox、opera、Safari、360 /*javascript简易运动Move.action(dom对象,json格式属性值对，缓动参考值，回调方法)示例：var box = document.getElementById(Ele);Move.action(box,{width:500,height:200,left:200,top:100,marginLeft:10,opacity:.5},5,function...
png24格式的图片在用jQuery添加显示隐藏动画时发现，图片的半透明区域出现黑边？在网上搜了搜主要有以下几种办法： 1、把图片保存成PNG-8格式。 2、把背景色一起切入并保存为JPG格式。 以上两种方法我试了试，好像效果并不好png8格式仍就会有黑边。 解决方法： 1、不要直接改变图片的透明度，而是给图片套个容器，去修改这个容器的透明度 2、给这个容器加个颜色相近的背景颜色（非常重要，解决bug的关键就在这一步，） 一般情况下，...
本文实例讲述了jQuery实现热气球动画背景登录框。分享给大家供大家参考。具体如下： jQuery热气球动画背景登录框是一款动态半透明背景的后台登录界面样式效果代码。页面效果简洁大方，是一款非常实用的特效代码，值得大家学习。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jQuery实现热气球动画背景登录框代码如下<head> <meta h...
今天我们来分享一款基于jQuery的横向手风琴图片轮播焦点图特效源码。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很广泛，大家可以试试这款jQuery焦点图。 运行效果图： ---------------------------------效果演示 源码下载---------------------------------为大家分享的jQuery半透明抽屉式手风琴代码如下<head> <meta http-equiv="Content-Type" content="text/html; ch...
首先给大家展示效果图：JS代码： <!--[if IE 6]> <script src="~/Scripts/UI/DD_belatedPNG.js"></script> <script> $(function () { //1、通过公共类 DD_belatedPNG.fix(".pngFix,.pngFix:hover"); //2、直接用选择器：类名，ID，标签 DD_belatedPNG.fix(".imgpng,img"); }); </script> <![endif]--> html代码： <div class="contain"> <h1>DD_belatedPNG实现IE6下的透明背景</h1> <div class="con"> <h2>1、通过公共类pngFix</h2...
本文实例讲述了js实现鼠标划过给div加透明度的方法。分享给大家供大家参考。具体实现方法如下： <script language="javascript"> <!-- Begin if ((navigator.appName.indexOf(Microsoft)+1)) { document.write(<style type="text/css"> #div2 a img{ filter:alpha(opacity=100)} #div2 a:hover img{ filter:alpha(opacity=70)} </style>);} if ((navigator.appName.indexOf(Netscape)+1)) { document.write(<style type="text/css"...
FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的代码如下: style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png)"语法： filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。 false : 滤镜...
本文实例讲述了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...
本文实例讲述了js实现透明度渐变效果的方法。分享给大家供大家参考。具体分析如下： 这里可实现一开始元素的透明度是30，鼠标移上的时候，透明度慢慢增加，到透明度100停止。鼠标移出，透明度慢慢减少，减少到30的效果。 要点一：因为无法直接获取和改变透明度的值，可以把透明度值赋给一个变量，让变量变化，最后把变量的值再赋给元素的透明值。var alpha=30;要点二：判断目标值和目前透明值，来判定是正向速度还是负向速度。if(t...