<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>基于jQuery弹出层有9种效果-懒人建站</title>
<meta name="keywords" content="网页特效,网页模板,导航菜单,焦点幻灯片,JS代码" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板,JS广告代码,网页特效,导航菜单,焦点幻灯片代码,原创视频教程与网页模板和CSS技巧。" />
<link href="styles/core.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
<script src="scripts/popup_layer.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function() {
//示例1,默认弹出层
new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});
//示例2,弹出层位置可偏移
new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",
offsets:{
x:102,
y:-41
}
});
//示例3,使用弹出层默认特效
new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});
//示例4,使用弹出层特效,并重载特效
var t4 = new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});
t4.doEffects = function(way){
way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");
};
//示例5,使用自定义样式,给最外层容器套上一个class,然后在css定义即可
new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});
//示例6,使用遮罩
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});
//示例7,使用不同的事件来触发
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});
//示例8,使用自定义事件
new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",
onBeforeStart:function(){
this.isDoPopup = false;
setTimeout(function(){this.isDoPopup = true}.binding(this),5000);
}
});
//示例9,综合效果
var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",useOverlay:true,useFx:true,
offsets:{
x:0,
y:-41
}
});
t9.doEffects = function(way){
if(way == "open"){
this.popupLayer.css({opacity:0.3}).show(400,function(){
this.popupLayer.animate({
left:($(document).width() - this.popupLayer.width())/2,
top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
opacity:0.8
},1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
}.binding(this));
}
else{
this.popupLayer.animate({
left:this.trigger.offset().left,
top:this.trigger.offset().top,
opacity:0.1
},{duration:500,complete:function(){this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
}
}
});
</script>
</head>
<body>
<h1>基于jQuery弹出层有9种效果</h1>
<div id="emample1" class="example">
<div id="ele1" class="tigger">触发元素1</div><div class="description">示例1:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。<br />new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗?</option>
</select>
<div id="blk1" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例1,默认弹出层</h2>
<a href="javascript:void(0)" id="close1" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample2" class="example">
<div id="ele2" class="tigger">触发元素2</div><div class="description">示例2:参数offsets可设置弹出层位置偏移量,让弹出层的位置随心所欲<br />new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗?</option>
</select>
<div id="blk2" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例2,弹出层位置可偏移</h2>
<a href="javascript:void(0)" id="close2" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample3" class="example">
<div id="ele3" class="tigger">触发元素3</div><div class="description">示例3:useFx设置为true即可使用弹出层默认特效<br />new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});</div>
<div class="clr"></div>
<select>
<option>ie6下能罩住我吗?</option>
</select>
<div id="blk3" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例3,使用弹出层特效</h2>
<a href="javascript:void(0)" id="close3" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div c
JQuery 全屏覆盖源码以及模式对话框
5星 · 超过95%的资源 需积分: 4 147 浏览量
2012-04-15
07:25:08
上传
评论
收藏 33KB RAR 举报
CYSONG168
- 粉丝: 35
- 资源: 12
最新资源
- Sora AI-关于文生视频的使用场景说明
- suno AI文生视频的相关教程和介绍使用
- 什么是后端开发-关于后端开发的一些小介绍分享
- Jurassic Pack Vol. II Dinosaurs 侏罗纪包卷恐龙二号Unity游戏模型资源unitypackage
- Jurassic Pack Vol. III Dinosaurs 侏罗纪包卷恐龙三号Unity游戏模型资源unitypackag
- Ultimate Seating Controller 终极座椅控制器Unity游戏开发插件资源unitypackage
- 什么是人工智能-关于人工智能的相关介绍说明
- Figma Converter for Unity适用Unity的Figma转换器Unity游戏开发插件unitypackage
- Creepy Animatronic Anims 令人毛骨悚然的电子动画Unity游戏动画插件资源unitypackage
- Rankings & Leaderboards 排名和排行榜Unity游戏开发插件资源unitypackage
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈