JQuery鼠標移到小圖顯示大圖效果的方法_jquery

這里的顯示大圖功能類似上一篇《JQuery實現超鏈接鼠標提示效果的方法》，稍微修改一下代碼，就可以做出一個圖片的提示效果。

參考前面的超鏈接提示效果的代碼，只需要將創建的div元素的代碼改為：

當鼠標滑過圖片后，顯示就會有大圖提示效果。為了使效果更為人性化，還需要為圖片增加說明文字，即提示出來的大圖片下面出現圖片相應的介紹文字。

可以根據超鏈接的title屬性值來獲得圖片相應的介紹文字，JQuery代碼如下：

然后將它追加到div元素中，代碼如下：

在判斷this.myTitle是否為""時，使用了三元運算。三元運算結構為：Boolean? 值1 : 值2。它的第1個參數必須為布爾值。當然三元運算也可以用“if(){ }else{ }”代替，例如：

這樣，圖片提示效果就完成了，當鼠標滑過圖片時，圖片會出現預覽的大圖，大圖下面還會有介紹文字。

本例完整代碼如下：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JQuery鼠標移到小圖顯示大圖效果的方法_jquery

JQuery鼠標移到小圖顯示大圖效果的方法_jquery:本文實例講述了JQuery鼠標移到小圖顯示大圖效果的方法。分享給大家供大家參考。具體分析如下： 這里的顯示大圖功能類似上一篇《JQuery實現超鏈接鼠標提示效果的方法》，稍微修改一下代碼，就可以做出一個圖片的提示效果。 參考前面的超鏈接提示效果的代碼，只

推薦度：

點擊下載本文 文檔為doc格式