javascript弹出层插件可自定义js弹出层动画特效



137 544 182



特效描述:弹出层插件 可自定义 弹出层动画,javascript弹出层插件支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。js代码。

代码结构

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/popup_layer.js"></script>

3. HTML代码

	<h1>一款体积小、功能强大的javascript弹出层插件。</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><!--emample1 end-->
    <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><!--emample2 end-->
    <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 class="foot-right"></div></div>
        </div>
    </div><!--emample3 end-->
    <div id="emample4" class="example">
        <div id="ele4" class="tigger">触发元素4</div><div class="description">示例4:使用弹出层特效,重载特效函数来完成自定义特效<br />var t4 =  new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});<br />
        t4.doEffects = function(way){<br />&nbsp;&nbsp;&nbsp;&nbsp;
        way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");<br />}
        </div>
        <div class="clr"></div>
        <select>
        	<option>ie6下能罩住我吗?</option>
        </select>
        <div id="blk4" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例4,使用弹出层特效,并重载特效</h2>
                <a href="javascript:void(0)" id="close4" 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><!--emample4 end-->
    <div id="emample5" class="example">
        <div id="ele5" class="tigger">触发元素5</div><div class="description">示例5:在弹出层容器上加上自定义的class<br />new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});</div>
        <div class="clr"></div>
        <select>
        	<option>ie6下能罩住我吗?</option>
        </select>
        <div id="blk5" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例5,使用自定义样式</h2>
                <a href="javascript:void(0)" id="close5" 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><!--emample5 end-->
    <div id="emample6" class="example">
        <div id="ele6" class="tigger">触发元素6</div><div class="description">示例6:useOverlay设置为true即可在弹出层后使用遮罩<br />new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});</div>
        <div class="clr"></div>
        <select>
        	<option>ie6下能罩住我吗?</option>
        </select>
        <div id="blk6" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例6,使用遮罩</h2>
                <a href="javascript:void(0)" id="close6" 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><!--emample6 end-->
    <div id="emample7" class="example">
        <div id="ele7" class="tigger">触发元素7</div><div class="description">示例7:eventType为事件触发类型,表示以何种方式触发弹出层<br />new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});</div>
        <div class="clr"></div>
        <select>
        	<option>ie6下能罩住我吗?</option>
        </select>
        <div id="blk7" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例7,使用不同的事件来触发</h2>
                <a href="javascript:void(0)" id="close7" 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><!--emample7 end-->
    <div id="emample8" class="example">
        <div id="ele8" class="tigger">触发元素8</div><div class="description">示例8:自定义事件,onBeforeStart在触发弹出前做一些自己想做的事。<br />这里我做的事是:在dom加载完成后,延迟5秒才能使用弹出层。(提示:可refresh页面看效果)<br />new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",<br />&nbsp;&nbsp;&nbsp;&nbsp;
				onBeforeStart:function(){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					this.isDoPopup = false;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					setTimeout(function(){this.isDoPopup = true}.binding(this),5000);<br />&nbsp;&nbsp;&nbsp;&nbsp;
				}<br />});
        </div>
        <div class="clr"></div>
        <select>
        	<option>ie6下能罩住我吗?</option>
        </select>
        <div id="blk8" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例8,使用自定义事件</h2>
                <a href="javascript:void(0)" id="close8" 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><!--emample8 end-->
    <div id="emample9" class="example">
        <div id="ele9" class="tigger">触发元素9</div><div class="description">示例9:综合效果<br />var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",<br />useOverlay:true,useFx:true,offsets:{x:0,y:-41}});<br />
t9.doEffects = function(way){<br />
&nbsp;&nbsp;&nbsp;&nbsp;if(way == "open"){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.popupLayer.css({opacity:0.3}).show(400,function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.popupLayer.animate({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:($(document).width() - this.popupLayer.width())/2,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:(document.documentElement.clientHeight -<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.popupLayer.height())/2 + $(document).scrollTop(),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity:0.8<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},1000,function(){this.popupLayer.css("opacity",1)}.binding(this));<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}.binding(this));<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;else{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.popupLayer.animate({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:this.trigger.offset().left,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:this.trigger.offset().top,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity:0.1<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{duration:500,complete:function(){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
}<br /></div>
        <div class="clr"></div>
        <select>
        	<option>ie6下能罩住我吗?</option>
        </select>
        <div id="blk9" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例9,综合效果</h2>
                <a href="javascript:void(0)" id="close9" 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><!--emample9 end-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 右键菜单 html5动画导航菜单 文字提示框 html5图片动画 提示框/弹出层 html5文字动画 layer html5表情动画 lightbox html5线条动画 Tooltip工具提示框 浮动提示框 html5飘落动画 html5弹窗动画 html5光标动画 html5悬停动画 加载动画 弹出层拖动 窗口提示框 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到