个人博客—一键分享侧边栏

个人博客—一键分享侧边栏

• 鼠标滑过分享侧边栏，则分享列表滑出；

滑出

• 鼠标滑出分享侧边栏，则分享列表滑回起始位置。

滑回起始位置

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">人人网</a></li>
    <li><a href="###" class="d" target="_blank">百度相册</a></li>
    <li><a href="###" class="e" target="_blank">腾讯朋友</a></li>
    <li><a href="###" class="f" target="_blank">豆瓣网</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">开心网</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部分

    //分享初始化位置,设置为当前视口高度和share css高度之和的一半再加上滚动条的滚动高度
    $('#share').css('top', $(window).scrollTop() + ($(window).innerHeight() - parseInt($('#share').first().css('height'))) / 2 + 'px');
    // 当页面发生滚动时，每隔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：个人博客