Javascripters大作--jQuery弹层类
<!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>Javascripters大作--jQuery弹层类.html</title>
??? <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>Javascripters大作--jQuery弹层类.html</h1>
?<div id="emample1" style="display:none;">
??????????? <div id="close1" style="display:none;">
??????????? <div id="close2" style="display:none;">
??????????? <div id="close3" style="display:none;">
??????????? <div id="close4" style="display:none;">
??????????? <div id="close5" style="display:none;">
??????????? <div id="close6" style="display:none;">
??????????? <div id="close7" style="display:none;">
??????????? <div id="close8" style="display:none;">
??????????? <div id="close9" style="display:none;">
??????? <div id="close10" 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>
</body>
</html>
