本文實例講述了JQuery鼠標移到小圖顯示大圖效果的方法。分享給大家供大家參考。具體分析如下：
這里的顯示大圖功能類似上一篇《JQuery實現超鏈接鼠標提示效果的方法》，稍微修改一下代碼，就可以做出一個圖片的提示效果。
參考前面的超鏈接提示效果的代碼，只需要將創建的div元素的代碼改為：
//創建 div 元素 圖片提示var tooltip = "<div id="tooltip"><img src=""+ this.href +"" alt="預覽圖"><//div>"; </div>
當鼠標滑過圖片后，顯示就會有大圖提示效果。為了使效果更為人性化，還需要為圖片增加說明文字，即提示出來的大圖片下面出現圖片相應的介紹文字。
可以根據超鏈接的title屬性值來獲得圖片相應的介紹文字，JQuery代碼如下：
this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle? "<br />" + this.myTitle : "";
然后將它追加到div元素中，代碼如下：
// 創建 div 元素var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產品預覽圖'/>"+imgTitle+"<//div>";
在判斷this.myTitle是否為""時，使用了三元運算。三元運算結構為：Boolean? 值1 : 值2。它的第1個參數必須為布爾值。當然三元運算也可以用“if(){ }else{ }”代替，例如：
var imgTitle; if (this.myTitle) { imgTitle = "<br />" + this.myTitle; } else { imgTitle = ""; }這樣，圖片提示效果就完成了，當鼠標滑過圖片時，圖片會出現預覽的大圖，大圖下面還會有介紹文字。
本例完整代碼如下：
<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>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
