個(gè)人博客—一鍵分享側(cè)邊欄

• 鼠標(biāo)滑過分享側(cè)邊欄，則分享列表滑出；

滑出

• 鼠標(biāo)滑出分享側(cè)邊欄，則分享列表滑回起始位置。

滑回起始位置

html部分

<!-- 一鍵分享 -->
<div id="share">
  <h2>分享到</h2>
  <ul>
    <li><a href="###" class="a" target="_blank">一鍵分享</a></li>
    <li><a href="###" class="b" target="_blank">新浪微博</a></li>
    <li><a href="###" class="c" target="_blank">人人網(wǎng)</a></li>
    <li><a href="###" class="d" target="_blank">百度相冊(cè)</a></li>
    <li><a href="###" class="e" target="_blank">騰訊朋友</a></li>
    <li><a href="###" class="f" target="_blank">豆瓣網(wǎng)</a></li>
    <li><a href="###" class="g" target="_blank">百度新首頁</a></li>
    <li><a href="###" class="h" target="_blank">和訊微博</a></li>
    <li><a href="###" class="i" target="_blank">QQ 空間</a></li>
    <li><a href="###" class="j" target="_blank">百度搜藏</a></li>
    <li><a href="###" class="k" target="_blank">騰訊微博</a></li>
    <li><a href="###" class="l" target="_blank">開心網(wǎng)</a></li>
    <li><a href="###" class="m" target="_blank">百度貼吧</a></li>
    <li><a href="###" class="n" target="_blank">搜狐微博</a></li>
    <li><a href="###" class="o" target="_blank">QQ 好友</a></li>
    <li><a href="###" class="p" target="_blank">更多...</a></li>
  </ul>
  <div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>
<!-- /一鍵分享 -->

js部分

    //分享初始化位置,設(shè)置為當(dāng)前視口高度和share css高度之和的一半再加上滾動(dòng)條的滾動(dòng)高度
    $('#share').css('top', $(window).scrollTop() + ($(window).innerHeight() - parseInt($('#share').first().css('height'))) / 2 + 'px');
    // 當(dāng)頁面發(fā)生滾動(dòng)時(shí)，每隔0.2秒重置一下分享的位置
    $(window).on('scroll', function () {
        setTimeout(function () {
            $('#share').css('top', $(window).scrollTop() + ($(window).innerHeight() - parseInt($('#share').first().css('height'))) / 2 + 'px');
        }, 200);
    });
    //分享收縮效果
    $('#share').hover(function () {
        $(this).animate({
            left:0
        },200);
    }, function () {
        $(this).stop().animate({
            left:-211
        },200);
    });

代碼在Github：個(gè)人博客