
个人觉得比较好看的一款jQuery鼠标滑过图片显示遮罩背景层代码特效,基于jQuery和CSS3制作。
JS代码:
<script src=\"http://libs.useso.com/js/jquery/2.1.1/jquery.min.js\" type=\"text/javascript\"></script>
<script>window.jQuery || document.write(\'<script src=\"js/jquery-2.1.1.min.js\"><\\/script>\')</script>
<script src=\"js/modernizr.js\"></script>
<script>
$(document).ready(function(){
if (Modernizr.touch) {
// show the close overlay button
$(\".close-overlay\").removeClass(\"hidden\");
// handle the adding of hover class when clicked
$(\".img\").click(function(e){
if (!$(this).hasClass(\"hover\")) {
$(this).addClass(\"hover\");
}
});
// handle the closing of the overlay
$(\".close-overlay\").click(function(e){
e.preventDefault();
e.stopPropagation();
if ($(this).closest(\".img\").hasClass(\"hover\")) {
$(this).closest(\".img\").removeClass(\"hover\");
}
});
} else {
// handle the mouseenter functionality
$(\".img\").mouseenter(function(){
$(this).addClass(\"hover\");
})
// handle the mouseleave functionality
.mouseleave(function(){
$(this).removeClass(\"hover\");
});
}
});
</script>










暂无评论内容