默认九宫格图片排列效果，当鼠标悬停在图片上后，会从图片的上方下滑一个半透明遮罩的效果同时出现一些文字介绍使用方法： 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);},function(){$(this).childre...
本文实例讲述了js实现透明度渐变效果的方法。分享给大家供大家参考。具体分析如下： 这里可实现一开始元素的透明度是30，鼠标移上的时候，透明度慢慢增加，到透明度100停止。鼠标移出，透明度慢慢减少，减少到30的效果。 要点一：因为无法直接获取和改变透明度的值，可以把透明度值赋给一个变量，让变量变化，最后把变量的值再赋给元素的透明值。var alpha=30;要点二：判断目标值和目前透明值，来判定是正向速度还是负向速度。if(t...
本文实例讲述了JavaScript实现动画打开半透明提示层的方法。分享给大家供大家参考。具体如下：DOM半透明提示层body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; ma...
本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下：这里实现点击后页面变灰色，并用JS弹出一个居中的浮动层提示窗口，这个窗口是透明的，可以设置透明度，网上已经有很多类似的JavaScript代码，你可以借鉴一下。浮动层居中的对话框效果演示+sTitle+((bCancel)?:)+\n + sHTML;dg.innerHTML = sHTML;var dbg = document.createElement("div");dbg.id = "nd-bdg";dbg.className = "neat-...
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 : 滤镜...
本文实例讲述了js实现鼠标划过给div加透明度的方法。分享给大家供大家参考。具体实现方法如下：#div2 a img{ filter:alpha(opacity=100)} #div2 a:hover img{ filter:alpha(opacity=70)} ');} if ((navigator.appName.indexOf('Netscape')+1)) { document.write(' #div2 a img{opacity: 1;} #div2 a:hover img{opacity: 0.7;}'); } else { document.write(''); } // End 希望本文所述对大家的javascript程序设计有所帮助。
首先给大家展示效果图：JS代码： $(function () {//1、通过公共类DD_belatedPNG.fix(".pngFix,.pngFix:hover");//2、直接用选择器：类名，ID，标签DD_belatedPNG.fix(".imgpng,img"); });html代码：DD_belatedPNG实现IE6下的透明背景1、通过公共类pngFixwindow.onload = function () { DD_belatedPNG.fix(".pngFix,.pngFix:hover"); }2、直接用选择器：类名，ID，标签实现DD_belatedPNG.fix(".imgpng,img");css代码：.contain { wi...
今天我们来分享一款基于jQuery的横向手风琴图片轮播焦点图特效源码。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很广泛，大家可以试试这款jQuery焦点图。 运行效果图： ---------------------------------效果演示 源码下载---------------------------------为大家分享的jQuery半透明抽屉式手风琴代码如下jQuery半透明抽屉式手风琴代码 *{margin:0;padding:0;list-style-...
本文实例讲述了jQuery实现热气球动画背景登录框。分享给大家供大家参考。具体如下： jQuery热气球动画背景登录框是一款动态半透明背景的后台登录界面样式效果代码。页面效果简洁大方，是一款非常实用的特效代码，值得大家学习。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jQuery实现热气球动画背景登录框代码如下jQuery热气球动...
png24格式的图片在用jQuery添加显示隐藏动画时发现，图片的半透明区域出现黑边？在网上搜了搜主要有以下几种办法： 1、把图片保存成PNG-8格式。 2、把背景色一起切入并保存为JPG格式。 以上两种方法我试了试，好像效果并不好png8格式仍就会有黑边。 解决方法： 1、不要直接改变图片的透明度，而是给图片套个容器，去修改这个容器的透明度 2、给这个容器加个颜色相近的背景颜色（非常重要，解决bug的关键就在这一步，） 一般情况下，...
平时工作中写网页涉及的运动往往都非常简单，比如改变宽高，透明度，位置，是最常用的几种形式，为了省事，整合了下，于是就有了下面这个东东： 兼容：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,functio...
废话不多说了，直接给大家写js代码了，代码如下所示:js全屏透明遮罩锁屏效果与之间#pageOverlay{visibility:hidden;position:fixed;top:0;left:0;z-index:1987;width:100%;height:100%;background:#000;filter:alpha(opacity=70);opacity:0.7;} /*IE6 fixed*/ * html{background:url(*) fixed;} * html body{margin:0;height:100%;} * html #pageOverlay{position:absolute;left:expression(documentElement.scrollLeft+documentEl...
半透明遮罩层效果基本上都是使用插件实现的，下面为大家分享下使用原生js实现半透明遮罩效果，感兴趣的朋友可以参考下哈，希望对你熟悉原生js有所帮助现在注册关闭 用户名 密 码 var myAlert = document.getElementById("alert"); var myMask=document.getElementById('mask'); var reg = document.getElementById("content").getElementsByTagName("a")[0]; var mClose = document.getElementById("close"); reg.onclick = f...
CSS+JavaScript 实现原理: 创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。CSS如何实现弹出一个全屏灰黑色透明遮罩效...
这个效果用的很频繁，经常都会有人问我这个问题，所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了，具体的看看代码注释就会明白。下面就是全部代码，复制到HTML中就可以运行的。#mask {position:fixed;width:100%;top:0px;left:0px;_position:absolute;_top:expression(documentElement.scrollTop);background:rgba(0,0,0,0.5);background:transparent\9;filter:progid...