1、自动判断浏览器宽度。
当浏览器窗口小于1024时，工具条会自动隐藏
支持浏览器窗口拖拽
2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。
用到的javascript代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="前端思考" /> <meta name="keywords" content="前端思考" /> <title>网页浮动工具条：前端思考</title> <style> *{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;color:#333;} img{border:none} h1{padding-bottom:15px;text-align:center} h2{padding-bottom:20px;} h3{font-size:16px;} p{padding:10px;} ul,li{list-style:none} .edge{width:880px;padding:10px;height:1500px;background:#fdedd0;border:5px solid #ff9933;margin:0 auto;} .author{color:#bbb;padding-bottom:30px;padding-right:10px;} .content{padding:10px 30px;} .coord{text-align:center;} .coord span{background:#000099;text-align:center;color:#fff;padding:0 5px;} /*------浮动工具条-----*/ #float_scroll{position:absolute;width:110px;height:300px;background:url(/test/img/chrome_s.png);z-index:99999;display:none;} #float_scroll h3{height:26px;padding:3px 0 0 10px;color:#fff;font-size:14px;} #float_scroll ul{width:48px;margin:0 auto;} #float_scroll ul li{width:48px;height:48px;padding-top:10px;} #float_scroll ul li a{display:block;width:48px;height:48px;} .oClose{display:block;width:44px;height:19px;position:absolute;right:10px;top:0;cursor:pointer;} .oClose.hover{background:url(/test/img/chrome_s.png) right bottom no-repeat;/*background:#f00;filter:alpha(opacity=50);opacity:0.5;*/} </style> <script type="text/javascript" src="http://www.artcss.com/js/jq_1.4.js"></script> <script type="text/javascript"> $(function(){ $(".oClose").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}); var name = $('#float_scroll'); //浮动工具条的ID function showBar(time){ setTimeout(function(){ $(name).show();},time); } function hideBar(time){ setTimeout(function(){ $(name).hide();},time); } $('.oClose').click(function(){ $(name).hide(); return false; }); showBar(1000); //hideBar(31000); //页面加载完毕多久后关闭工具条 var pageW = $(".edge").get(0).offsetWidth;//主体页面宽度; function scrollBar(){ var offset = $(window).height()/2 - $(name).height()/2 + $(document).scrollTop(); var oLeft; if($(window).width() >= $(name).width()*2+pageW){ oLeft = $(window).width()/2+pageW/2; }else if($(window).width() <= pageW){ oLeft = pageW - $(name).width(); }else{ oLeft = $(window).width() - $(name).width(); } $(name).animate({top:offset},{duration:200,queue:false}); $(name).animate({left:oLeft},{duration:100,queue:false}); $(".num").text($(window).width()); $(".num2").text(oLeft); } scrollBar(); $(window).resize(scrollBar); $(window).scroll(scrollBar); }); </script> </head> <body> <div class="edge"> <div class="author"> Author: Artcss<br /> E-mail:artcss@163.com<br /> URL: http://www.artcss.com/?p=799<br /> </div> <h1>这里是网页主体内容区域</h1> <div class="coord">窗口宽度小于1160时，浮动工具条消失，当前窗口宽度为<span class="num"></span> <br />浮动条的left值为：<span class="num2"></span></div> <div class="content"> <h2>jQuery浮动工具条</h2> <h3>1、自动判断浏览器宽度。</h3> <p>当浏览器窗口小于1024时，工具条会自动隐藏</p> <h3>支持浏览器窗口拖拽</h3> <p>2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。</p> <br /><br /><br /><br /><br /> <h2>jQuery浮动工具条</h2> <h3>1、自动判断浏览器宽度。</h3> <p>当浏览器窗口小于1024时，工具条会自动隐藏</p> <h3>支持浏览器窗口拖拽</h3> <p>2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。</p> <br /><br /><br /><br /><br /> <h2>jQuery浮动工具条</h2> <h3>1、自动判断浏览器宽度。</h3> <p>当浏览器窗口小于1024时，工具条会自动隐藏</p> <h3>支持浏览器窗口拖拽</h3> <p>2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。</p> <br /><br /><br /><br /><br /> </div> </div> <div id="float_scroll"> <h3>工具条<span class="oClose"></span></h3> <ul> <li><a href="http://www.artcss.com/" target="_blank"><img src="/test/img/seo.png" /></a></li> <li><a href="http://www.artcss.com/" target="_blank"><img src="/test/img/firebug.png" /></a></li> <li><a href="http://www.artcss.com/" target="_blank"><img src="/test/img/ietab.png" /></a></li> <li><a href="http://www.artcss.com/" target="_blank"><img src="/test/img/tools.png" /></a></li> </ul> </div> </body> </html>