jQuery 图片信息浮动显示的实现代码
发布时间：2015-11-06 编辑：jiaochengji.com
本文分享一段jquery代码，实现图片信息的浮动显示，类似京东商城上那种商口图片的浮动显示，蛮有效果的，有兴趣的朋友，可以研究下。
为大家举一个图片信息的浮动显示的效果实例。
代码如下：
<html> <head> <meta charset="utf-8"/> <style> li{list-style:none;float:left;margin-right:10px;border:1px solid #AAAAAA} #tooltip{position:absolute;} </style> <script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script> <script> $(function(){ var x = 10; var y = 20; $("a.tooltip").hover(function(){ var title = this.title; $("a.tooltip").attr("newTitle",this.title); this.title = ''; var $div = $("<div id='newTip'><img src='"+this.href+"'/><br/>"+this.newTitle+"</div>"); $("body").append($div); $div.css({"position":"absolute","background":"silver"}).show("fast"); },function(){ this.title = this.newTitle; $("#newTip").remove(); }).mousemove(function(e){ var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}).show("fast"); }); }) </script> </head> <body> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a> </li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> </body> </html>您可能感兴趣的文章：
jQuery 图片信息浮动显示的实现代码
jQuery实现图片信息的浮动显示实例代码
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
jquery.Jwin.js 基于jquery的弹出层插件代码
JQuery浮动DIV提示信息并自动隐藏的代码
jQuery图片标题插件 Captify
jQuery图片标注插件 jCaption
基于JQuery的浮动DIV显示提示信息并自动隐藏
php绘图不显示图片怎么办
jquery 文字浮动提示效果(示例)
[关闭]