个人觉得比较好看的一款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>
暂无评论内容