首页 > Other > 带有显示隐藏按钮的固定底部的footer的实现代码

带有显示隐藏按钮的固定底部的footer的实现代码

jq部分:

//SET NOCONFLICT TO WORK WITH OTHER LIBRARIES jQuery.noConflict();

//SET GLOBAL VARIABLES

var barVisible = jQuery.cookie('os_bar');

//Toggle the footer function toggleFooter(){ //Check if the bottombar is supposed to be visible if(barVisible == "true"){ barVisible = "false"; jQuery('section#footer').animate({ top: '0px' }, 300); jQuery('a#hideBar').animate({ top: '40px' }, 500); jQuery.cookie('os_bar', 'false', { expires: 1, path: '/' }); } else { barVisible = "true"; jQuery('a#hideBar').animate({ top: '-36px' }, 500); jQuery('section#footer').animate({ top: '40px' }, 500); jQuery.cookie('os_bar', 'true', { expires: 1, path: '/' }); } }

html部分:
<section id="footerWrapper">
<section id="footer" style="top: 0px;">
<!-- HIDEBAR -->
<a onclick="toggleFooter();" id="hideBar" title="Show Bar" href="javascript:void(0);" style="top: 40px;"><span>&nbsp;</span></a>
<!-- /HIDEBAR -->

<!-- FOOTERCONTENT -->
<section id="footerContent">
<!-- footer的内容 -->
</section>
<!-- /FOOTERCONTENT -->
</section>
</section>
css部分:

section#footerWrapper {
bottom: 0;
display: block;
height: 37px;
overflow: hidden;
padding: 15px 0 0;
position: fixed;
width: 100%;
z-index: 999;

}

分类:Other
  1. 还没有评论。
  1. No trackbacks yet.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: