图片提示效果
超链接的提示效果 http://www.cnblogs.com/liubeimeng/p/5849292.html 稍微修改就可以变成图片提示效果.
html部分代码:
1 <h3>有效果:</h3> 2 <ul> 3 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"></a></li> 4 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 5 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 6 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 7 </ul> 8 <br/><br/><br/><br/> 9 <br/><br/><br/><br/> 10 <h3>无效果:</h3> 11 <ul> 12 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 13 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 14 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 15 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 16 </ul>
jQuery代码:
1 //图片提示
2 (function($){ 3 var x = 10; 4 var y = 20; 5 $("a.tooltip").mouseover(function(e){ 6 this.myTitle = this.title; 7 this.title = ""; 8 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素 9 $("body").append(tooltip); //把它追加到文档中 10 $("#tooltip").css({"top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px"}).show("fast"); //设置x坐标和y坐标，并且显示 11 }).mouseout(function(){ 12 this.title = this.myTitle; 13 $("#tooltip").remove(); //移除 14 }).mousemove(function(e){ 15 $("#tooltip").css({"top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px"}); 16 }); 17 })(jQuery);
为了是效果更加人性化, 还需要为文字添加文字说明, 即提示出来的大图片下面出现图片相应的介绍.
1 this.myTitle = this.title; 2 this.title = ""; 3 var imgTitle = this.myTitle ? "<br>" + this.myTitle : "";
如果title有内容则显示title内容,没有则显示为空.用到了一个三元运算符.
完整代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 body{margin:0;padding:40px;background-color:#FFF;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;} 8 img{border:0;} 9 ul,li{margin:0;padding:0;} 10 li{list-style:none;float:left;display:inline;margin-right:10px;border:1px solid #AAA;} 11 #tooltip{position:absolute;border:1px solid #333;background-color:#F7F5D1;padding:1px;color:#F00;display:none;} 12 </style> 13 </head> 14 <body> 15 <h3>有效果:</h3> 16 <ul> 17 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"></a></li> 18 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 19 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 20 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 21 </ul> 22 <br/><br/><br/><br/> 23 <br/><br/><br/><br/> 24 <h3>无效果:</h3> 25 <ul> 26 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 27 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 28 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 29 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 30 </ul> 31 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 32 <script type="text/javascript"> 33 (function($){ 34 var x = 10; 35 var y = 20; 36 $("a.tooltip").mouseover(function(e){ 37 this.myTitle = this.title; 38 this.title = ""; 39 var imgTitle = this.myTitle ? "<br>" + this.myTitle : ""; 40 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素 41 $("body").append(tooltip); //把它追加到文档中 42 $("#tooltip").css({"top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px"}).show("fast"); //设置x坐标和y坐标，并且显示 43 }).mouseout(function(){ 44 this.title = this.myTitle; 45 $("#tooltip").remove(); //移除 46 }).mousemove(function(e){ 47 $("#tooltip").css({"top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px"}); 48 }); 49 })(jQuery); 50 </script> 51 </body> 52 </html>
效果截图:
