<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>