jQuery鼠标悬浮遮罩显示分享按钮 - 阿强爱分享

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

作者: Aqiang

全网最全的网络资源分享网站

手机扫码查看

标签:

样式代码

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!邮箱:2377724272@qq.com

<!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('/jscss/demoimg/201405/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('/jscss/demoimg/201405/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;
}
</style>
</head>
<body>
<div class="container" style="text-align:center; font-family:arial">
	<h2>jQuery鼠标悬浮遮罩显示分享按钮</h2>
	<img src="/jscss/demoimg/201405/01.jpg" alt="Steak" width="300"/>
	<img src="/jscss/demoimg/201405/02.jpg" alt="Fruit Cake" width="300" /><br/>
	<img src="/jscss/demoimg/201405/03.jpg" alt="Hambuger" width="300" />
	<img src="/jscss/demoimg/201405/04.jpg" alt="Drink" width="300" />	
</div>
<script src="/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>	
<div style="text-align:center;clear:both"></div>
</body>
</html>
分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。
头像
站长签名: 专注分享各类源码-全网资源免费分享平台好货不私藏

文章作者信息版权声明

阅读时间:  发布于:2019-10-23

本文标题: jQuery鼠标悬浮遮罩显示分享按钮

本文链接: https://iooqp.cn/?post=536

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 2616 个字!

分享到:

评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

粤公网安备 44200002443934号

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

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

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏