本文主要是介绍img_Mask，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="gb2312">
<title>jQuery鼠标悬浮遮罩显示分享按钮</title><style>
.pinit {position:relative;display:inline-block;
}
.pinit .pinit-overlay {position:absolute;top:0;left:0;width:100%;height:100%;z-index:200;display:none;background:transparent url('img/img2.png') repeat 0 0;text-align:center;
}
.pinit .pinit-overlay a {position:relative;top:5%;left:100%;margin:-10px 0 0 -21px;display:block;width:43px;height:20px;background:transparent url('img/img1.png')no-repeat 0 0;text-indent:-9999em;
}
.pinit .pinit-overlay a:hover {background-positon: 0 -21px;
}
.pinit .pinit-overlay a:active {background-position: 0 -42px;
}
</style>
</head>
<body>
<div class="container" style="text-align:center; font-family:arial"><h2>jQuery鼠标悬浮遮罩显示分享按钮</h2><img src="img/project_pic1.jpg" width="300"/><img src="img/project_pic2.jpg" width="300" /><br/><img src="img/project_pic3.jpg" width="300" /><img src="img/project_pic4.jpg" width="300" />
</div>
<script src="js/jquery-2.1.1.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>
<div style="text-align:center;clear:both"></div>
</body>
</html>这篇关于img_Mask的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
