jQuerythumbnail惟美的图片Tip提示效果资源-CSDN文库

共23个文件

gif：18个

ds_store：2个

html：1个

4星 · 超过85%的资源需积分: 5 33 浏览量 2010-08-12 15:02:43 上传评论收藏 114KB RAR 举报

在本文中，我们将深入探讨如何使用jQuery库来创建一种唯美的图片thumbnail提示效果。这种效果通常用于提升用户体验，当用户将鼠标悬停在缩略图上时，会弹出一个带有详细信息或预览的提示框。jQuery作为一款强大的JavaScript库，提供了丰富的API和插件，使得实现这样的功能变得轻松易行。我们需要了解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过引入jQuery库到项目中，我们可以利用其简洁的语法和丰富的功能来提高开发效率。要创建thumbnail提示效果，我们首先需要准备HTML结构，包括图片缩略图和隐藏的提示框元素。例如： ```html <div class="thumbnail"> <img src="thumbnail.jpg" alt="Thumbnail Image"> <div class="tooltip"> <img src="full-image.jpg" alt="Full Image"> <p>这是图片的描述或详细信息。</p> </div> </div> ``` 接下来，我们要编写CSS样式来美化thumbnail和提示框。这可能包括设置位置、大小、颜色等属性，以确保提示框在鼠标悬停时以美观的方式出现。例如： ```css .thumbnail { position: relative; } .tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 10px; border-radius: 5px; } .thumbnail:hover .tooltip { display: block; } ``` 现在，我们可以使用jQuery来处理悬停事件并控制提示框的显示。这里，我们将添加一个简单的jQuery代码片段，当用户将鼠标悬停在缩略图上时显示提示框，离开时隐藏它： ```javascript $(document).ready(function() { $('.thumbnail').hover(function() { $(this).find('.tooltip').fadeIn(); }, function() { $(this).find('.tooltip').fadeOut(); }); }); ``` 这段代码首先等待文档加载完成，然后为所有`.thumbnail`元素绑定`hover`事件。当鼠标进入元素时，找到对应的`.tooltip`并淡入显示；当鼠标离开时，淡出隐藏。此外，为了使效果更加唯美，我们还可以添加动画效果，比如调整提示框的位置或改变透明度，这可以通过jQuery的动画方法实现。例如，可以增加一个平滑的移动动画： ```javascript $(document).ready(function() { $('.thumbnail').hover(function() { var tooltip = $(this).find('.tooltip'); tooltip.stop().fadeTo(200, 1).slideDown(200); }, function() { $(this).find('.tooltip').stop().fadeTo(200, 0, function() { $(this).slideUp(200); }); }); }); ``` 以上就是使用jQuery创建唯美图片thumbnail提示效果的基本步骤。通过结合HTML、CSS和jQuery，我们可以实现各种自定义效果，以满足不同项目的需求。当然，如果你不希望从零开始编写代码，也可以寻找现成的jQuery插件，如Tooltipster、qTip等，它们提供了更多预设样式和选项，可以快速实现类似功能。记得在实际应用中，考虑性能优化和兼容性问题，以确保最佳的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery thumbnail 惟美的图片Tip提示效果.rar （23个子文件）

codefans.net

jquery-thumbnail

__MACOSX

thumbnail

._4.gif 82B

._8.gif 82B

._9.gif 82B

._1.gif 82B

._3.gif 82B

._7.gif 82B

._6.gif 82B

._2.gif 82B

._.DS_Store 82B

._5.gif 82B

thumbnail

1.gif 7KB

8.gif 9KB

7.gif 11KB

Thumbs.db 25KB

4.gif 7KB

3.gif 8KB

jquery-1.3.1.min.js 54KB

5.gif 6KB

2.gif 8KB

index.html 5KB

.DS_Store 6KB

6.gif 10KB

9.gif 11KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Thumbnail Gallery with transparent fading caption</title> <script src="js/jquery-1.3.1.min.js"></script> <script> $(document).ready(function() { //move the image in pixel var move = -15; //zoom percentage, 1.2 =120% var zoom = 1.2; //On mouse over those thumbnail $('.item').hover(function() { //Set the width and height according to the zoom percentage width = $('.item').width() * zoom; height = $('.item').height() * zoom; //Move and zoom the image $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); //Display the caption $(this).find('div.caption').stop(false,true).fadeIn(200); }, function() { //Reset the image $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); //Hide the caption $(this).find('div.caption').stop(false,true).fadeOut(200); }); }); </script> <style> body { font-family:arial; } .item { width:125px; height:125px; border:4px solid #222; margin:5px 5px 5px 0; /* required to hide the image after resized */ overflow:hidden; /* for child absolute position */ position:relative; /* display div in line */ float:left; } .item .caption { width:125px; height:125px; background:#000; color:#fff; font-weight:bold; /* fix it at the bottom */ position:absolute; left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=80); /* ie */ -moz-opacity:0.8; /* old mozilla browser like netscape */ -khtml-opacity: 0.8; /* for really really old safari */ opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */ } .item .caption a { text-decoration:none; color:#0cc7dd; font-size:16px; /* add spacing and make the whole row clickable*/ padding:5px; display:block; } .item .caption p { padding:5px; margin:0; font-size:10px; } img { border:0; /* allow javascript moves the img position*/ position:absolute; } .clear { clear:both; } </style> </head> <body> <div class="item"> <a href="#"><img src="1.gif" alt="Cycliner" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Cycliner</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="item"> <a href="#"><img src="2.gif" alt="Banana Moon" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Banana Moon</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="item"> <a href="#"><img src="3.gif" alt="BlueBuck" title="" width="125" height="125"/></a> <div class="caption"> <a href="">BlueBuck</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="clear"></div> <div class="item"> <a href="#"><img src="4.gif" alt="SOSO" title="" width="125" height="125"/></a> <div class="caption"> <a href="">SOSO</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="item"> <a href="#"><img src="5.gif" alt="Buzzsprout" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Buzzsprout</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="item"> <a href="#"><img src="6.gif" alt="Sweetcakes" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Sweetcakes</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="clear"></div> <div class="item"> <a href="#"><img src="7.gif" alt="Paperbox" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Paperbox</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="item"> <a href="#"><img src="8.gif" alt="Alessandro" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Alessandro</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="item"> <a href="#"><img src="9.gif" alt="Trento Media" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Trento Media</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="clear"></div> <br/><br/><br/> <a href="http://www.queness.com">Queness.com</a> | <a href="">Back to Tutorial</a> </body> </html>

评论收藏

内容反馈