jQuery图片提示示例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>图片提示</title>

  <!--   引入jQuery -->

  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <style type="text/css">

 body{margin:0;padding:40px;background:#fff;font:80%Arial,Helvetica,sans-serif;color:#555;line-height:180%;}

 img{border:none;}

 ul,li{margin:0;padding:0;}

 li{list-style:none;float:left;display:inline;margin-right:10px;border:1px solid#AAAAAA;}#tooltip{position:absolute;border:1px solid#ccc;background:#333;padding:2px;display:none;color:#fff;}

 </style>

 <script type="text/javascript">

 //<![CDATA[

 $(function(){

     var x = 10;

     var y = 20;

     $("a.tooltip").mouseover(function(e){

         this.myTitle = this.title;

         this.title = "";

         var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";

         var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素

         $("body").append(tooltip);    //把它追加到文档中

         $("#tooltip")

             .css({

                 "top": (e.pageY+y) + "px",

                 "left":  (e.pageX+x)  + "px"

             }).show("fast");      //设置x坐标和y坐标，并且显示

     }).mouseout(function(){

         this.title = this.myTitle;

         $("#tooltip").remove();     //移除

     }).mousemove(function(e){

         $("#tooltip")

             .css({

                 "top": (e.pageY+y) + "px",

                 "left":  (e.pageX+x)  + "px"

             });

     });

 })

 //]]>

 </script>

 </head>

 <body>

 <h3>有效果：</h3>

     <ul>

         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>

         <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>

     </ul>

 <br/><br/><br/><br/>

 <br/><br/><br/><br/>

 <h3>无效果：</h3>

 <ul>

         <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>

         <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

         <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

         <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>

     </ul>

 </body>

 </html>
巴特西

jQuery图片提示示例

最新文章

热门文章
