This article describes the JS implementation with the Close button is always displayed at the bottom of the page tool bar method. Share to everyone for your reference. Specifically as follows:
This is a very useful code, to the Web page to add a always displayed in the bottom of the browser window toolbar, you can put on the above bulletin, contact, and so on information, the code of the bar with a close button, you can always close
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> fixed bottom (top) Part menu </title>
<script type= "Text/javascript" src= "Js/jquery1.3.2.js" ></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
Li{list-style:none;} Img{border:none;} Em{font-style:normal;}
A{color: #555; Text-decoration:none;outline:none;blr:this.onfocus=this.blur ();}
A:hover{color: #000; text-decoration:underline;}
Body{font-size:12px;font-family:arial,verdana, Helvetica, Sans-serif;word-break:break-all;word-wrap:break-word;
. bnav{text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background: #fff; margin:0 1%;border: #B4B4B4 1px solid; border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;/* for IE6 */_top:expression ( Documentelement.scrolltop + documentelement.clientheight-this.offsetheight); /* for IE6 */overflow:visible;}
. close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}
. Close A{background:url (... /images/201008/close.gif) No-repeat Center; Width:16px;display:block;}
. bnav2{height:24px;line-height:24px margin:1px; Margin-bottom:0;background: #E5E5E5;}
. Bnav. s1{position:absolute;left:10px;
. Bnav. S1 img{padding-top:3px;margin-right:7px;
. Bnav. s2{position:absolute;right:30px; color: #888;
. bnav. S2 span{padding-right:10px;
. bnav. S2 a{margin:0 6px;}
. rolltext{position:absolute;left:160px;height:25px;line-height:25px; Overflow:hidden;}
. rolltext Dt,.rolltext Dd{float:left;width:auto;
. Rolltext A{display:block;height:25px;overflow:hidden;}
. bnav3{height:25px;width:16px;line-height:25px; margin:0 1%; padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;/* for IE6 * * _top:expression (Documentelement.scrolltop + documentelement.clientheight-this.offsetheight); /* for IE6 */overflow:visible;}
. bnav3 A{background:url (... /images/201008/open.gif) No-repeat Center; display:block;height:25px;width:16px; text-indent:-5000px;}
</style>
<body>
<script type= "Text/javascript" >
var closebn = $.cookie ("Bnav");
if (closebn = = "0") {Closenav ();}
function Shownav () {
$ (". OpenClose"). Toggle ();
$.cookie ("Bnav", "1", {expires:1});
}
function Closenav () {
$ (". OpenClose"). Toggle ();
$.cookie ("Bnav", "0", {expires:1});
}
Single-line scrolling
function Singlescroll () {
$ (". Rolltext dd"). Animate ({margintop: " -25px"},500,function () {
$ (this). CSS ({margintop: "0px"}). Find ("A:first"). Appendto (this);
});
}
$ (document). Ready (function () {
SetInterval ("Singlescroll ()", 3000);
});
</script>
<div class= "Bnav openclose" >
<div class= "Bnav2" >
<span class= "S1" >
<a href= "#" ></a><a href= "#" ></a>
</span>
<DL class= "Rolltext" >
<dt> Special Statement:</dt>
<dd>
<a href= "#" > Celebrate the Double Festival period, the mall has special staff on duty, please God rest assured shopping </a>
<a href= "#" > Tian Yue sold mobile phones for mainland licensed, the national product </a>
<a href= "#" > part of a small number of Hong Kong, Ouchen machines We have specifically noted </a>
<a href= "#" > Please God do not consult the same kind of questions, customer service phone will explode </a>
</dd>
</dl>
<span class= "S2" >
<span><a href= "#" >[login]</a><a href= "#" >[Free Registration]</a></span><a "#" > Shopping Cart </a>|<a href= "#" > Help Center </a>|<a href= "#" > Online message </a>
</span>
<span class= "Close" ><a href= "javascript:void (0)" onclick= "Closenav ()" title= "off" > Off </a></span >
</div>
</div>
<div class= "bnav3 openclose" style= "Display:none;" ><a href= "javascript:void (0)" onclick= "Shownav ()" title= "open" > Open </a></div>
</body>
I hope this article will help you with your JavaScript programming.
