网页浮动工具条

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>

你可能感兴趣的:(工具)