网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 菜单导航 >> 正文
最新文章
· JS版无限级网页折叠菜单,类似于树形
· CSS实现4级的下拉菜单
· 简洁的滑动门菜单
· jQuery带动画效果的多级下拉菜单
· 自动切换的JS菜单
· 隔指定时间选项卡自动切换
· CSS+JS实现兼容性很好的无限级下拉菜
· 自动切换的选项卡
· 仿163网盘网站的Js折叠菜单
· 随鼠标移过动态放大的菜单导航
热门文章
 自动固定在网页顶部的悬浮菜单栏
 仿天涯固定在网页顶部的导航条
 仿淘宝商城商品属性选择效果
 无限级CSS树形菜单 Ltree Ver2.0
 二级树形菜单CSS TreeMenu
 同一页面多种Tab及滑动门应用的综合
 仿淘宝网导航的选项卡效果
 自动切换的JS菜单
 适用于网站后台的竖向二级下拉导航
 政府网站常用的蓝色二级导航菜单
相关文章
Js点击文字弹出层,点击层以外区域关闭层
Js弹出层,可自定义大小,双击关闭层
可拖拽、可关闭并带遮罩效果的Js弹出层
Hongru-Box 自定义的Js弹出层插件
超漂亮的仿腾讯弹出层效果
带遮罩效果并可以拖动的DIV弹出层
简单的带遮罩效果的弹出层
js模仿腾讯世界杯人物介绍弹出提示层
js弹出层组件artDialog2.1正式版
使用简单精美的封装好的弹出层
让父页面变暗并不可操作的弹出层提示效果
超漂亮提取自ZCMS弹出框效果v2.1
可拖动的弹出层提示效果
固定在浏览器显示区域内的弹出提示层
带渐变背景和遮罩效果的弹出层
来源:JavaEye 更新时间:2010/9/21 16:05:14 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:

<script>
function sAlert(txt)
{
//var eSrc=(document.all)?window.event.srcElement:arguments[1]; document.body.scrollHeight+
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = "1000px";
shield.style.background = "#333";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=0)";
shield.style.opacity = 0;

var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.left = "50%";
alertFram.style.top = "50%";
alertFram.style.marginLeft = "-225px" ;
alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
alertFram.style.width = "450px";
alertFram.style.height = "150px";
alertFram.style.background = "#ccc";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "10001";

strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[提示]</li>\n";
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li>\n";
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\" 确 定 \" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";
strHtml += "</ul>\n";

alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*150;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*150)+"\")";
}
}catch(e){}
}
var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity(shield,c);
}
var ad = setInterval("doAlpha()",1);
this.doOk = function(){
document.body.removeChild(alertFram);
document.body.removeChild(shield);
document.body.onselectstart = function(){return true;}
document.body.oncontextmenu = function(){return true;}
}
document.getElementById("do_OK").focus();
document.body.onselectstart = function(){return false;}
document.body.oncontextmenu = function(){return false;}
}
</script>

<input type="button" value="点击这里" onclick="sAlert('test弹窗效果');" />

△运行 ☉预览 #复制 +收藏
特效说明:
带渐变背景和遮罩效果的弹出层
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号