网页浮动工具条

浏览数：16 / 时间：2015年06月09日

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:[email protected]<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>