一般tips都是文字,这个可以支持图片,很漂亮
JavaScript Code
- <script type="text/javascript">
- // Load this script once the document is ready
- $(document).ready(function () {
- // Get all the thumbnail
- $('div.thumbnail-item').mouseenter(function(e) {
- // Calculate the position of the image tooltip
- x = e.pageX - $(this).offset().left;
- y = e.pageY - $(this).offset().top;
- // Set the z-index of the current item,
- // make sure it's greater than the rest of thumbnail items
- // Set the position and display the image tooltip
- $(this).css('z-index','15')
- .children("div.tooltip")
- .css({'top': y + 10,'left': x + 20,'display':'block'});
- }).mousemove(function(e) {
- // Calculate the position of the image tooltip
- x = e.pageX - $(this).offset().left;
- y = e.pageY - $(this).offset().top;
- // This line causes the tooltip will follow the mouse pointer
- $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
- }).mouseleave(function() {
- // Reset the z-index and hide the image tooltip
- $(this).css('z-index','1')
- .children("div.tooltip")
- .animate({"opacity": "hide"}, "fast");
- });
- });
- </script>
CSS Code
- <style>
- .thumbnail-item {
- /* position relative so that we can use position absolute for the tooltip */
- position: relative;
- float: left;
- margin: 0px 5px;
- }
- .thumbnail-item a {
- display: block;
- }
- .thumbnail-item img.thumbnail {
- border:3px solid #ccc;
- }
- .tooltip {
- /* by default, hide it */
- display: none;
- /* allow us to move the tooltip */
- position: absolute;
- /* align the image properly */
- padding: 8px 0 0 8px;
- }
- .tooltip span.overlay {
- /* the png image, need ie6 hack though */
- background: url(images/overlay.png) no-repeat;
- /* put this overlay on the top of the tooltip image */
- position: absolute;
- top: 0px;
- left: 0px;
- display: block;
- width: 350px;
- height: 200px;
- }
- </style>
XML/HTML Code
- <div class="thumbnail-item">
- <a href="#"><img src="images/small1.jpg" class="thumbnail"/></a>
- <div class="tooltip">
- <img src="images/big1.jpg" alt="" width="330" height="185" />
- <span class="overlay"></span>
- </div>
- </div>
- <div class="thumbnail-item">
- <a href="#"><img src="images/small2.jpg" class="thumbnail"/></a>
- <div class="tooltip">
- <img src="images/big2.jpg" alt="" width="330" height="185" />
- <span class="overlay"></span>
- </div>
- </div>
- <div class="thumbnail-item">
- <a href="#"><img src="images/small3.jpg" class="thumbnail"/></a>
- <div class="tooltip">
- <img src="images/big3.jpg" alt="" width="330" height="185" />
- <span class="overlay"></span>
- </div>
- </div>
原文地址:http://www.freejs.net/article_jquerytupiantexiao_97.html
相关推荐
jquery tips提示插件自适应屏幕宽度提示图片信息
61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏相册图片自动切换插件 63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]...
类似于一个小商城。主要用到jquery的方法。实现新闻的向上滚动,图片的切换,图片的局部放大,移动到上面tips的实现。是学习html的java脚本、css样式表、jquery的绝佳例子。更有可能是你建站的基础。jquery商城。
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
实现了图片轮播功能,jquery插件名称为zoeDylan.ImgChange,图片路径、跳转链接、提示标题都是有动态数组来配置,jquery插件可灵活配置6个参数, height高、width宽、mgs图片地址、links点击地址、tips图片说明、...
jquery tips提示图片信息,鼠标经过小图是弹出大图,不错一款特效
比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素...
tips[37] = '不要相信“天下设计一大抄”我们可以借鉴,但绝不能抄袭!'; tips[38] = '学设计,也想学习书法一样,临摹是一个必要的过程。'; tips[39] = '随时用零碎的时间(如等人、排队等)做零碎的事情。'; tips[40...
我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人。我们只要把鼠标放到如下...jquery中tips的有很多插件,但是大部分都是跟随鼠标走的,你离开那个指定的位置就会消失。现在这个是把鼠标是要可以放到弹出的ti
基本介绍 这个jq插件主要是使用canvas来画出这个tip的外表,而且这个tip能够自动调整大小,由于是用canvas画的,而不是图片,所以调整之后也不会变模糊之类的。 主要思想是用一个P标签来装载title的值,然后把他放在...
16、修正了几处界面显示效果 17、在“私人定制界面”页面增加了“是否开启系统tips” (tips有时候很烦人……哥也深受其害 >_<)的功能。 [2009-11-27] v3.2正式版 build20091127 1、增强了“自由签到”功能,...