首页 > 代码库 > 网页浮动工具条
网页浮动工具条
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。