为大家举一个图片信息的浮动显示的效果实例。
代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <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> |