这次给大家带来jQuery做出垂直半透明手风琴效果，jQuery做出垂直半透明手风琴效果的注意事项有哪些，下面就是实战案例，一起来看一下。运行效果图：为大家分享的jQuery半透明抽屉式手风琴代码如下<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery半透明抽屉式手风琴代码</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoratio...
Test function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } else if(opacStart ...
该 DIV是半秀明状态，这样可以看到背景也可以衬托文字，当鼠标放到文字上的时候，DIV层彻底不透明，文字清淅显示出来，一般这种效果都是要配合JavaScript的，这样兼容性会更好。 图片与文字结合的半透明效果，鼠标移上不透明 .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(http://files.jb51.net/demoimg/200910/wall.gif) no-repeat; width:300px; height:235px;} .in_box{...
本文实例讲述了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果。分享给大家供大家参考，具体如下：JavaScript弹出DIV层，页面背景渐变成半透明html,body{font-size:12px;margin:0px;height:100%;} .mesWindow{border:#666 1px solid;background:#fff;} .mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;} .mesWindowContent{margin:4px;font-size...
代码如下: 弹出提示 * { margin: 0; padding: 0; font-size: 12px; } html, body { height: 100%; width: 100%; } #content { background: #FFFFFF; padding: 30px; height: 100%; } #content a { font-size: 30px; color: #369; font-weight: 700; } #alert { z-index:2; border: 1px solid #369; width: 300px; height: 150px; background: #e2ecf5; z-index: 1000; position: absolute; display: none; } #alert h4 { heig...
上一章我介绍了遮罩的页面可增加部分区域编辑模块，这章将介绍父页面显示遮罩层，弹出半透明状态的dialog。dialog即弹出的子页面，div。 效果图如下： 具体代码实现如下： 代码如下: New Document .mydiv { background-color: #FFFFFF; border: 5px solid #c7c7c7; text-align: center; line-height: 20px; font-size: 12px; font-weight: bold; z-index:999; width: 500px; height: 300px; left:50%; top:50%; margi...
本文实例讲述了js实现九宫格图片半透明渐显特效的方法。分享给大家供大家参考。具体实现方法如下：代码如下: 九宫格图片半透明渐显效果.invisible {FILTER: alpha(opacity=0) }function high(which2){ theobject=which2 highlighting=setInterval("highlightit(theobject)",50) } function low(which2){ clearInterval(highlighting) which2.filters.alpha.opacity=0 } function highlightit(cur2){ if (cur2.filters.alpha.opacit...
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供大家参考。具体实现方法如下：代码如下:js+CSS弹出居中的背景半透明div层body{margin:0px;} #bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;} #popbox{position:absolute;width:400px; height:400px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none;...
默认九宫格图片排列效果，当鼠标悬停在图片上后，会从图片的上方下滑一个半透明遮罩的效果同时出现一些文字介绍使用方法： 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...
本文实例讲述了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...
今天我们来分享一款基于jQuery的横向手风琴图片轮播焦点图特效源码。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很广泛，大家可以试试这款jQuery焦点图。 运行效果图： ---------------------------------效果演示 源码下载---------------------------------为大家分享的jQuery半透明抽屉式手风琴代码如下jQuery半透明抽屉式手风琴代码 *{margin:0;padding:0;list-style-...
本文实例讲述了jQuery实现热气球动画背景登录框。分享给大家供大家参考。具体如下： jQuery热气球动画背景登录框是一款动态半透明背景的后台登录界面样式效果代码。页面效果简洁大方，是一款非常实用的特效代码，值得大家学习。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jQuery实现热气球动画背景登录框代码如下jQuery热气球动...
半透明遮罩层效果基本上都是使用插件实现的，下面为大家分享下使用原生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...