jQuery浮動層點擊圖標按鈕關閉或展開



84 334 112



特效描述:浮動層 點擊圖標按鈕 關閉或展開,jquery浮動層點擊圖標按鈕關閉滑動提示浮動層,或展開滑動提示浮動層。一般用于網站的文字提示信息浮動層。

代碼結構

1. 引入JS

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

2. HTML代碼

<script type="text/javascript">
$(document).ready(function(){
    function anim(duration){
        $('#mint').animate(
            {height: 'toggle'},
            {duration: duration}
        );
    }
    $('#closebtn').click(function() {
        $('#mintbar').slideUp();
        anim(600);
    });
    $('#mint').click(function() {
        anim(600);
        $('#mintbar').slideDown('slow');
    });
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
#mintbar{background:url('images/bg1.png') repeat-x;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#FFF;padding:0;position:relative;top:0;left:0;z-index:2000;width:100%;text-align:center;height:40px;}
#mintbar div{position:relative;margin:0 auto;padding-top:10px;width:960px;height:30px;}
#mintbar div h2{float:left;font-size:16px;}
#closebtn{float:right;}
#mint{cursor:pointer;position:relative;z-index:1000;}
</style>
<div id="mintbar">
	<div>
		<h2>jquery 浮動層點擊關閉滑動顯示展開圖標</h2>
		<a id="closebtn" href="#"><img src="images/close.png" /></a>
	</div>
</div>
<div id="mint" style="display:none;position:absolute;top:0;right:10px;"><img src="images/ribbon1.png" alt="絲帶"/></div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 浮動菜單 浮動導航 圖片滑動 圖片滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子