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

2024-09-05 12:19:12

字体：大中小

来源：转载

供稿：网友

jQuery鼠标悬浮遮罩显示分享按钮，jquery类似Pinterest的鼠标悬停遮罩显示分享按钮，请注意，jquery的版本要在1.9以上，低版本可以导致效果无效。本悬浮遮罩效果在鼠标放在图片时可看到图片透明度有变化。

<!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="/d/file/p/2024/09-05/d253457317ea27c647674e1765548159.jpg" alt="Steak" width="300"/>	<img src="/d/file/p/2024/09-05/0c28ebcc50ec5992396913e1763dfcd5.jpg" alt="Fruit Cake" width="300" /><br/>	<img src="/d/file/p/2024/09-05/71aedf5f6dfe36362fd30d578ff38f67.jpg" alt="Hambuger" width="300" />	<img src="/d/file/p/2024/09-05/acc09558ea3dfc53ad636fed7d08d70d.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">Pin It</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>

上一篇：jQuery掷色子动画

下一篇：HTML5 360图片旋转特效