基于jquery+css来实现鼠标滑过图片黑白显示的特效.zip资源-CSDN文库

共13个文件

gif：9个

html：2个

bak：1个

版权申诉

94 浏览量 2022-11-10 00:34:04 上传评论收藏 314KB ZIP 举报

在前端开发中，创建引人注目的视觉效果是提升用户体验的关键因素之一。"基于jquery+css来实现鼠标滑过图片黑白显示的特效"是一个常见的网页交互设计，它能吸引用户的注意力，使页面更加生动有趣。这个压缩包文件包含了实现这种特效的代码资源，下面将详细解释如何使用jQuery和CSS来实现这一效果。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画等功能。在这个特效中，jQuery用于监听鼠标的滑入（mouseover）和滑出（mouseout）事件。当鼠标滑过图片时，jQuery会触发相应的事件，改变图片的样式。 CSS则负责定义图片的初始状态和鼠标滑过后的变化。通常，我们可以创建两个版本的同一张图片：一个彩色的原始图片，一个转换为黑白的图片。通过CSS的`display`属性控制这两个图片的可见性，可以实现黑白显示的切换。例如： ```css .color-image { display: block; } .black-white-image { display: none; } ``` 然后，在jQuery的事件处理函数中，我们可以这样编写代码： ```javascript $(document).ready(function() { $('.hover-image').mouseover(function() { $(this).find('.color-image').hide(); $(this).find('.black-white-image').show(); }).mouseout(function() { $(this).find('.color-image').show(); $(this).find('.black-white-image').hide(); }); }); ``` 这段代码首先确保文档加载完成，接着找到所有具有`hover-image`类的元素（这些元素通常包含彩色图片和黑白图片）。当鼠标滑过这些元素时，隐藏彩色图片并显示黑白图片；当鼠标离开时，恢复原状。不过，除了上述方法，还可以利用CSS滤镜（filters）直接在浏览器端实时转换图片颜色。例如，使用CSS的`filter`属性可以实现黑白效果： ```css .hover-image:hover .color-image { filter: grayscale(100%); -webkit-filter: grayscale(100%); /* 对旧版浏览器的支持 */ } ``` 这种方法的优点在于无需额外的黑白图片，只需要通过CSS就能实现黑白显示的效果。在压缩包中的文件"132686998364269451"可能是HTML、CSS和JavaScript代码的组合，包含了实现这个特效的具体细节。为了实际应用这个特效，你需要将这些代码嵌入到你的网页项目中，并根据自己的需求进行调整。通过结合jQuery的事件处理和CSS的样式控制，可以轻松实现鼠标滑过图片时图片由彩色变为黑白的动态效果。这不仅提高了用户体验，也为网页设计增添了趣味性和互动性。在实际应用中，还可以根据项目需求进行个性化定制，比如添加过渡动画，使效果更流畅自然。

资源推荐

资源详情

资源评论

收起资源包目录

基于jquery+css来实现鼠标滑过图片黑白显示的特效.zip （13个子文件）

132686998364269451

likecs.com_132686998373938720

images

jquery.js 56KB

sushiand.gif 53KB

ricardog.gif 18KB

ryankeis.gif 34KB

ngenwork.gif 35KB

lemonsta.gif 27KB

foodteas.gif 17KB

heyindy_.gif 46KB

garysrea.gif 31KB

cubescri.gif 27KB

index.html 5KB

about.html 2KB

index.html.bak 5KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="JS代码,黑白特效,图片特效,鼠标滑过,CSS,jQuery特效,JS图片特效,JS广告代码，JS常用代码" /> <meta name="description" content="jquery+css实现鼠标滑过图片黑白显示的特效，更多黑白特效,图片特效,鼠标滑过,CSS,jQuery特效代码请访问脚本之家JS代码频道。" /> <title>jquery+css实现鼠标滑过图片黑白显示的特效_脚本之家</title> <style type="text/css"> body { height: 100%; margin: 0; padding: 0; font: normal 10px Verdana, Arial, Helvetica, sans-serif; background: #fff; position: relative; } h1 { text-align: center; font-weight: normal; font-size: 2.5em; } h1 small { display: block; font-size: 0.7em; color: #999; } img {border: none;} ul.gallery { width: 708px; list-style: none; margin: 0 auto; padding: 0; } ul.gallery li { float: left; margin: 10px; padding: 0; text-align: center; border: 1px solid #ccc; -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/ -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/ -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/ display: inline; /*--Gimp Fix aka IE6 Fix--*/ } ul.gallery li a.thumb { width: 204px; height: 182px; padding: 5px; border-bottom: 1px solid #ccc; cursor: pointer; } ul.gallery li span { /*--Used to crop image--*/ width: 204px; height: 182px; overflow: hidden; display: block; } ul.gallery li a.thumb:hover { background: #333; } ul.gallery li h2 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px; background: #f0f0f0; border-top: 1px solid #fff; /*--Subtle bevel effect--*/ } ul.gallery li a {text-decoration: none; color: #777; display: block;} </style> <script type="text/javascript" src="images/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("ul.gallery li").hover(function() { //On hover... var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver' //Set a background image(thumbOver) on the <a> tag $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'}); //Fade the image to 0 $(this).find("span").stop().fadeTo('normal', 0 , function() { $(this).hide() //Hide the image after fade }); } , function() { //on hover out... //Fade the image to 1 $(this).find("span").stop().fadeTo('normal', 1).show(); }); }); </script> </head> <body> <h1><a href="http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/" style="color: #333; text-decoration: none;">Greyscale Hover Effect w/ CSS & jQuery</a><br /></h1> <ul class="gallery"> <li> <a href="#" class="thumb"><span><img src="images/sushiand.gif" alt="" /></span></a> <h2><a href="#">Sushi & Robots</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/garysrea.gif" alt="" /></span></a> <h2><a href="#">Gary's Life</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/cubescri.gif" alt="" /></span></a> <h2><a href="#">Cube Scripts</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/ryankeis.gif" alt="" /></span></a> <h2><a href="#">Ryan Keiser</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/ricardog.gif" alt="" /></span></a> <h2><a href="#">Ricardo Gimenes</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/foodteas.gif" alt="" /></span></a> <h2><a href="#">Food Tease</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/lemonsta.gif" alt="" /></span></a> <h2><a href="#">Lemon Stand</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/heyindy_.gif" alt="" /></span></a> <h2><a href="#">Hey Indy</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/ngenwork.gif" alt="" /></span></a> <h2><a href="#">nGen Works</a></h2> </li> </ul> <div style="text-align:center; clear:both; margin:5px auto"> <p>代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a>　更多相关效果，请到脚本之家 <a href="http://www.jb51.net/jiaoben/guanggao1.html" target="_blank">脚本下载</a>栏目</p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p><a href="http://sc.jb51.net" target="_blank">脚本之家素材中心</a>整理。</p> <p><script src="/js/js-preview-728x90.js"></script><br /><br /><br /><center><script src="/js/tj.js"></script></center></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉