jquery插件库-鼠标滑过图片放大缩小显示，文字渐渐显示.zip资源-CSDN文库

共12个文件

jpg：7个

png：2个

css：1个

版权申诉

jquery插件库

jquery

网站设计

web设计

123 浏览量 2023-03-15 05:11:40 上传评论收藏 263KB ZIP 举报

在网页设计领域，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个“jquery插件库-鼠标滑过图片放大缩小显示，文字渐渐显示.zip”压缩包文件包含了一个jQuery插件，用于增强用户体验，特别是针对图像展示和文本揭示效果。该插件的主要功能是当用户将鼠标光标滑过图片时，图片会自动放大或缩小，同时相关的文字描述会逐渐显示出来。这种交互式设计可以吸引用户的注意力，提升网站的视觉吸引力和信息传递效率。在网页设计中，这种效果常用于产品展示、文章配图或其他需要突出细节的地方。我们来详细了解这个jQuery插件的工作原理。在JavaScript中，我们可以利用jQuery的事件监听器来捕捉鼠标悬停事件（hover）。当鼠标进入图片区域时，触发一个函数来改变图片的大小，同时启动一个淡入（fadeIn）动画显示隐藏的文字。当鼠标离开图片时，图片恢复原大小，文字则淡出（fadeOut）。以下是一个简单的实现代码示例： ```javascript $(document).ready(function() { $('.image-hover').hover( function() { $(this).find('img').stop().animate({ width: '+=50', height: '+=50' }, 500); // 图片放大 $(this).find('.description').stop().fadeIn(500); // 文字淡入 }, function() { $(this).find('img').stop().animate({ width: '-=50', height: '-=50' }, 500); // 图片缩小 $(this).find('.description').stop().fadeOut(500); // 文字淡出 } ); }); ``` 在这个示例中，`.image-hover` 是包含图片和文字的容器类，`.description` 是隐藏的文本元素。`stop()` 函数用于防止动画堆栈，确保动画按预期顺序执行。`animate()` 函数则用于改变图片尺寸，`fadeIn()` 和 `fadeOut()` 分别用于控制文字的可见性。在实际应用中，你需要将这段代码与HTML结构配合使用，确保图片和文字的HTML元素有正确的类名。此外，为了优化性能，通常会将CSS样式分离到外部样式表中，以提高页面加载速度。在网页设计和开发中，这样的插件不仅可以提高用户体验，还可以通过动态效果使网页更加生动有趣。对于设计师和开发者来说，了解并掌握如何创建或应用这样的插件是提高网页交互性和吸引力的关键技能之一。这个jQuery插件提供了一种巧妙的方式来增强网页上的图片和文本展示，通过鼠标滑过的互动效果，为用户提供更直观的信息浏览体验。它体现了jQuery库的强大功能，以及JavaScript在现代网页设计中的核心作用。如果你正在寻找一种方法来提升网站的视觉表现力，这个插件库值得尝试。

资源推荐

资源详情

资源评论

收起资源包目录

jquery插件库-鼠标滑过图片放大缩小显示，文字渐渐显示.zip （12个子文件）

jquery插件库-鼠标滑过图片放大缩小显示，文字渐渐显示

jquery.1.4.2-min.js 78KB

logo.png 28KB

small01.jpg 54KB

css

shou.css 2KB

index.html 7KB

images

small9d03c58136f0f413d4f619536213bddb.jpg 24KB

small6ae21c4c44285e9a58afd5c3f42ae36f.jpg 33KB

small18129a189a8f547aba10fb10f91e6282.jpg 21KB

smallee9241175b1e38b5df271a9f2f67034d.jpg 28KB

dianbg.png 424B

small8937f779ac932d157fe04fe463b083d4.jpg 28KB

small99c04eb3c2092522c82fda8a5e9245b5.jpg 25KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标滑过图片放大缩小显示，文字渐渐显示基于jquery_维度端weiduduan.com</title> <link href="css/shou.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //移动像素的图像 var move = -15; //缩放比例，1.2 =120％ var zoom = 1.2; //在对这些缩略图的鼠标滑过事件 $('.item').hover(function(){ //根据缩放百分比设置宽度和高度 width = $('.item').width() * zoom; height = $('.item').height() * zoom; //移动和缩放图像 $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); //显示标题 $(this).find('div.caption').stop(false,true).fadeIn(200); },function(){ //复位图像 $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); //隐藏标题 $(this).find('div.caption').stop(false,true).fadeOut(200); }); }); </script> </head> <body> <div class="weiduduan clearfix"> <div class="demopage"> <div class="item"><img width="150" height="150" src="images/small18129a189a8f547aba10fb10f91e6282.jpg" alt="jquery 幻灯片插件 canvas 3D旋转木马图片立体展示图片有大到小一次顺序排列" /> <div class="caption"><a href="http://www.weiduduan.com/" title="维度端weiduduan.com" target="_blank">jquery 特效</a> <p><a href="http://www.weiduduan.com/" title="维度端weiduduan.com" target="_blank">jquery 幻灯片插件 weiduduan 3D旋转木马图片立体展示图片有大到小一次顺序排列</a></p> </div> </div> <div class="item"><img width="150" height="150" src="images/small6ae21c4c44285e9a58afd5c3f42ae36f.jpg" alt="javascript滚动图片按钮控制图片左右自动滚动" /> <div class="caption"><a href="http://www.weiduduan.com/js">javascript 特效</a> <p><a href="http://www.weiduduan.com/js" title="维度端weiduduan.com" target="_blank">javascript滚动图片按钮控制图片左右自动滚动</a></p> </div> </div> <div class="item"><img width="150" height="150" src="images/smallee9241175b1e38b5df271a9f2f67034d.jpg" alt="用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox" /> <div class="caption"><a href="http://www.weiduduan.com/web" title="维度端weiduduan.com" target="_blank">css 特效</a> <p><a href="http://www.weiduduan.com/web" title="维度端weiduduan.com" target="_blank">用div+css制作纯CSS维度端，兼容IE6 IE7 IE8及以上 Firefox</a></p> </div> </div> <div class="clear"> </div> <div class="item"><img width="150" height="150" src="images/small8937f779ac932d157fe04fe463b083d4.jpg" alt="jquery HTML5 幻灯片插件用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果" /> <div class="caption"><a href="http://www.weiduduan.com/sucai" title="维度端weiduduan.com" target="_blank">html5 特效</a> <p><a href="http://www.weiduduan.com/sucai" title="维度端weiduduan.com" target="_blank">jquery HTML5 幻灯片插件用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></p> </div> </div> <div class="item"><img width="150" height="150" src="images/small9d03c58136f0f413d4f619536213bddb.jpg" alt="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条" /> <div class="caption"><a href="http://www.weiduduan.com/yunzuo" title="维度端weiduduan.com" target="_blank">jquery 特效</a> <p><a href="http://www.weiduduan.com/yunzuo" title="维度端weiduduan.com" target="_blank">jquery weiduduan 插件设置浏览器默认垂直滚动条和内置滚动条</a></p> </div> </div> <div class="item"><img width="150" height="150" src="images/small99c04eb3c2092522c82fda8a5e9245b5.jpg" alt="jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动" /> <div class="caption"><a href="http://www.weiduduan.com/js" title="维度端weiduduan.com" target="_blank">jquery 特效</a> <p><a href="http://www.weiduduan.com/js" title="维度端weiduduan.com" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片维度端多行滚动带按钮控制滚动</a></p> </div> </div> </div> </div>  <div style="margin-top:30px; padding-bottom:8px; line-height:25px; font-size:14px; color:#333; text-align:center;"> <p>代码整理：<a title="维度端前端网" target="_blank" href="http://www.weiduduan.com/"><span style="color:#06C;text-decoration:underline;">维度端前端网</span></a>，尊重他人劳动成果，转载请注明出处。注：本代码仅限于学习交流，请勿用于商业用途!</p> <p>维度端为您提供：<a target="_blank" href="http://www.weiduduan.com/js/adv/" title="广告代码">广告代码</a> <a target="_blank" title="CSS3教程" href="http://www.weiduduan.com/web/css3/">CSS3教程</a> <a target="_blank" href="http://www.weiduduan.com/sucai/qq/" title="qq表情">qq表情</a> <a target="_blank" title="建站经验" href="http://www.weiduduan.com/yunzuo/zhan/">建站经验</a> <a target="_blank" href="http://www.weiduduan.com/js/focus/" title="js焦点图">js焦点图</a> <a target="_blank" href="http://www.weiduduan.com/js/texiao/" title="窗口时间">窗口时间</a> <a target="_blank" title="高清图片" href="http://www.weiduduan.com/pic/">高清图片</a> <a target="_blank" href="http://www.weiduduan.com/js/flash/" title="flash特效">flash特效</a> <a target="_blank" title="seo优化" href="http://www.weiduduan.com/yunzuo/seo/">seo优化</a> <a target="_blank" title="励志文章" href="http://www.weiduduan.com/yunzuo/lizhi/">励志文章</a> <a target="_blank" href="http://www.weiduduan.com/js/jq/" title="jquery插件">jquery插件</a> <a target="_blank" title="创业故事" href="http://www.weiduduan.com/yunzuo/story/">创业故事</a></p> </div>   </body> </html>

评论收藏

内容反馈

版权申诉