jQ鼠标悬停遮罩显示分享按钮js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQ鼠标悬停遮罩显示分享按钮js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="gb2312">
	<title>jQuery�������������ʾ�����ť</title>
	<link rel="stylesheet" href="css/jquery.pinit.css" />
</head>
<body>
	<div class="container" style="text-align:center; font-family:arial">
		<h2>jQuery�������������ʾ�����ť</h2>

		<img src="1.jpg" alt="Steak" width="300"/>
		<img src="2.jpg" alt="Fruit Cake" width="300" /><br/>
		<img src="3.jpg" alt="Hambuger" width="300" />
		<img src="4.jpg" alt="Drink" width="300" />	

	</div>

	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.pinit.js"></script>	
	<script type="text/javascript">
	$(function () {
	
		$('img').pinit();
	
	});
	</script>
</body>
</html>

JS代码(jquery.pinit.js):

/**jQuery Pinit for Pinterest*Author:Kevin Liew*Website:http://www.queness.com/*License:http://redactorjs.com/license/*Usage:$('img').pinit();
	*/
(function($){
	//Attach this new method to jQuery $.fn.extend({
	pinit:function(options){
	var defaults ={
	wrap:'<span class="pinit"/>',pageURL:document.URL}
var options = $.extend(defaults,options);
	var o = options;
	//Iterate over the current set of matched elements 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);

CSS代码(jquery.pinit.css):

.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('../images/semi-white.png') repeat 0 0;text-align:center;}
.pinit .pinit-overlay a{position:relative;top:50%;left:50%;margin:-10px 0 0 -21px;display:block;width:43px;height:20px;background:transparent url('../images/pinit-button.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;}

附件:下载该文件资源,减少时间成本(增值服务)