jQuery浮动层点击图标按钮关闭或展开



81 323 108



特效描述:浮动层 点击图标按钮 关闭或展开,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

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