当前位置:首页 > 网页特效 > 图片特效 >

jQuery鼠标悬浮遮罩显示分享按钮

时间:2014-05-28 00:11 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • jQuery鼠标悬浮遮罩显示分享按钮,jquery类似Pinterest的鼠标悬停遮罩显示分享按钮,请注意,jquery的版本要在1.9以上,低版本可以导致效果无效。本悬浮遮罩效果在鼠标放在图片时可看到图片透明度有变化。
  • <div class="container" style="text-align:center; font-family:arial">
    <h2>jQuery鼠标悬浮遮罩显示分享按钮</h2>
    <img src="http://www.codefans.net/jscss/demoimg/201405/01.jpg" style="white-space:pre">
    </div>
    <script src="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    (function($){
     $.fn.extend({
         pinit: function(options) {
    var defaults = {
    wrap: '<span class="pinit"/>',
    pageURL: document.URL
    }
    var options = $.extend(defaults, options);
    var o = options;
             return this.each(function() {
              var e = $(this),
              pi_media = e.data('media') ? e.data('media') : e[0].src,
              pi_url = o.pageURL,
              pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
              pi_isvideo = 'false';
              bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);
    var eHeight = e.outerHeight();
              e.wrap(o.wrap);
              e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');
    $('.pinit .pinit-button').on('click', function () {
    window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
    return false;
    });
    $('.pinit').mouseenter(function () {
    $(this).children('.pinit-overlay').fadeIn(200);
    }).mouseleave(function () {
    $(this).children('.pinit-overlay').fadeOut(200);
    });
             });
         }
     });
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(function () {
    $('img').pinit();
    });
    </script>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-pic/8099.html

图片特效下载排行

最新文章