此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();
})
})
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
图片遮罩效果 tip提示层 弹出层 QQ相册 Jquery相册 提示插件