支架捕鱼机多少钱一台

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 606字
更新時間： 2020-11-28 16:21:47

3.11 實戰1：網頁中的圖片預覽

為了讓項目中的頁面更漂亮，經常會使用圖片，而圖片經常需要實現預覽效果。

具體要求：將鼠標移動到圖片上，將在該圖片的右下角出現一張與之相對應的大圖片，以達到圖片預覽的效果。設計一個包含4張圖片對象的頁面picture_CTP.html，代碼如下：

        <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>

在上述代碼中，用超級鏈接標簽包含4張圖片。

設置列表和圖片的相關樣式，以達到預期的排列順序，具體代碼如下：

        ul, li{
         margin:0;
         padding:0;
        }
        li{
         list-style:none;
         float:left;
         display:inline;
         margin-right:10px;
         border:1px solid #AAAAAA;
        }
        img{border:none;
        }

編寫jQuery代碼，實現圖片預覽功能，具體代碼如下：

        01    $(function(){
        02         var x = 10;
        03         var y = 20;
        04         $("a.tooltip").mouseover(function(e){
        05               this.myTitle = this.title;
        06               this.title = "";
        07               var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
        08             //創建div元素
        09               var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='
                    產品預覽圖’/>"+imgTitle+"<\/div>";
        10             $("body").append(tooltip);              //把它追加到文檔中
        11               $("#tooltip")
        12                    .css({
        13                          "top": (e.pageY+y) + "px",
        14                          "left":  (e.pageX+x)  + "px"
                                15                 }).show("fast");                      //設置x坐標和y坐標，并且顯示
                                16         }).mouseout(function(){
                                17               this.title = this.myTitle;
                                18             $("#tooltip").remove();                         //移除
                                19         }).mousemove(function(e){
                                20               $("#tooltip")
                                21                    .css({
                                22                          "top": (e.pageY+y) + "px",
                                23                          "left":  (e.pageX+x)  + "px"
                                24                    });
                                25         });
                                26    })

在上述代碼中，第4～15行設置鼠標滑入圖片時的處理方法。其中，第9行創建一個包含大圖片的提示框（<div>標簽元素對象），第10行將所創建的提示框對象追加到文檔中，剩下的代碼主要用來設置x和y坐標，使得提示框顯示在鼠標旁邊。第16～18行設置鼠標滑出圖片時的處理方法，主要是移除提示框。第19～25行設置鼠標在圖片上移動時的處理方法，即通過css()方法設置提示效果的坐標，以達到提示跟隨鼠標一起移動的效果。

在瀏覽器中運行頁面，效果如圖3.15所示。當鼠標滑過小圖片時，快速出現圖片的預覽提示效果，效果如圖3.16所示；當鼠標離開小圖片時，圖片預覽提示效果消失。

圖3.15 瀏覽頁面

圖3.16 鼠標滑入圖片時的效果

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.11 實戰1：網頁中的圖片預覽

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）