zoukankan      html  css  js  c++  java
  • jQuery图片提示示例

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>图片提示</title>
     6  <!--   引入jQuery -->
     7  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
     8 <style type="text/css">
     9 body{margin:0;padding:40px;background:#fff;font:80%Arial,Helvetica,sans-serif;color:#555;line-height:180%;}
    10 img{border:none;}
    11 ul,li{margin:0;padding:0;}
    12 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;}
    13 </style>
    14 <script type="text/javascript">
    15 //<![CDATA[
    16 $(function(){
    17     var x = 10;
    18     var y = 20;
    19     $("a.tooltip").mouseover(function(e){
    20         this.myTitle = this.title;
    21         this.title = "";    
    22         var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
    23         var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素
    24         $("body").append(tooltip);    //把它追加到文档中                         
    25         $("#tooltip")
    26             .css({
    27                 "top": (e.pageY+y) + "px",
    28                 "left":  (e.pageX+x)  + "px"
    29             }).show("fast");      //设置x坐标和y坐标,并且显示
    30     }).mouseout(function(){
    31         this.title = this.myTitle;    
    32         $("#tooltip").remove();     //移除 
    33     }).mousemove(function(e){
    34         $("#tooltip")
    35             .css({
    36                 "top": (e.pageY+y) + "px",
    37                 "left":  (e.pageX+x)  + "px"
    38             });
    39     });
    40 })
    41 //]]>
    42 </script>
    43 
    44 </head>
    45 <body>
    46 <h3>有效果:</h3>
    47     <ul>
    48         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
    49         <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
    50         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
    51         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    52     </ul>
    53 
    54 
    55 <br/><br/><br/><br/>
    56 <br/><br/><br/><br/>
    57 
    58 
    59 <h3>无效果:</h3>
    60 <ul>
    61         <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
    62         <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
    63         <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
    64         <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    65     </ul>
    66 </body>
    67 </html>
  • 相关阅读:
    SharePoint文件磁盘存储组件使用指南
    自定义SharePoint新网站创建过程(1)
    SharePoint : 超级Web Application Framework
    Video:使用VSeWSS创建定制SharePoint页面
    SharePoint Designer 2007 is now FREE !
    关于SharePoint解决方案开发模型的凌乱文章…
    初试Silverlight Streaming服务
    Feature Schema中Module和File节点属性含义的解释
    如何定制列表项编辑页面
    使用SharePoint Server 2007搜索Domino Notes
  • 原文地址:https://www.cnblogs.com/showersun/p/3677950.html
Copyright © 2011-2022 走看看