热门关键字:
jquery > jquery插件 > jquery消息提示特效 > Jquery实现鼠标hover图片遮罩弹出提示层特效

Jquery实现鼠标hover图片遮罩弹出提示层特效

32331
所属分类:jquery消息提示特效
发布时间:2012/12/28 11:26:53
下载量:2247
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=137

Jquery特效是一款非常实用的功能,也是现在互联网上很流行的一种图片布局,它实现鼠标hover在当前图片上的时候,整个容器里面的图片都被遮罩,只有当前图片高亮显示还弹出提示层,最近Jquery学堂群里面的网友们也经常问有没有这类型的特效,一直也没有网友分享,今天就整理了此Jquery特效出来分享给网友们学习。

 

实现代码也非常简单,只要会Jquery的网友都能看得懂,只要按照以下步骤即可:

1、引入Jquery插件JS文件和所需要的样式文件

2、简单的写上以下18行代码就可以实现了

$(document).ready(function() {
	$("div.tip_trigger a.img").hover(function() {
		$(this).parent('div.tip_trigger').css({
			'background': '#8de08b',
			'z-index': '1000'
		});
		$('#h_coolsite .block').show();
		tip = $(this).siblings('.tip');
		tip.show();
	},
	function() {
		$(this).parent('div.tip_trigger').css({
			'background': 'none',
			'z-index': '0'
		});
		$('#h_coolsite .block').hide();
		tip.hide();
	})
})

 

效果如下:

Jquery实现鼠标hover图片遮罩弹出提示层特效

 

 





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:图片遮罩效果 tip提示层 弹出层 QQ相册 Jquery相册 提示插件
  • Jquery实现鼠标hover图片遮罩弹出提示层特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • Jquery实现鼠标hover图片遮罩弹出提示层特效
  • Jquery实现鼠标hover图片遮罩弹出提示层特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐