JQuery鼠標(biāo)移到小圖顯示大圖效果的方法

更新時(shí)間：2015年06月10日 17:45:52 作者：簡(jiǎn)明現(xiàn)代魔法圖書(shū)館

這篇文章主要介紹了JQuery鼠標(biāo)移到小圖顯示大圖效果的方法,涉及jQuery鼠標(biāo)事件與圖形操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery鼠標(biāo)移到小圖顯示大圖效果的方法。分享給大家供大家參考。具體分析如下：

這里的顯示大圖功能類(lèi)似上一篇《JQuery實(shí)現(xiàn)超鏈接鼠標(biāo)提示效果的方法》，稍微修改一下代碼，就可以做出一個(gè)圖片的提示效果。

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

//創(chuàng)建 div 元素 圖片提示
var tooltip = "<div id="tooltip"><img src="&quot;+ this.href +&quot;" alt="預(yù)覽圖"><\/div>"; 
</div>

當(dāng)鼠標(biāo)滑過(guò)圖片后，顯示就會(huì)有大圖提示效果。為了使效果更為人性化，還需要為圖片增加說(shuō)明文字，即提示出來(lái)的大圖片下面出現(xiàn)圖片相應(yīng)的介紹文字。

可以根據(jù)超鏈接的title屬性值來(lái)獲得圖片相應(yīng)的介紹文字，JQuery代碼如下：

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

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

// 創(chuàng)建 div 元素
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產(chǎn)品預(yù)覽圖'/>"+imgTitle+"<\/div>";

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

var imgTitle; 
if (this.myTitle) { 
  imgTitle = "<br />" + this.myTitle; 
} else { 
  imgTitle = ""; 
}

這樣，圖片提示效果就完成了，當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，圖片會(huì)出現(xiàn)預(yù)覽的大圖，大圖下面還會(huì)有介紹文字。

本例完整代碼如下：

<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='預(yù)覽圖'/>"+imgTitle+"<\/div>";
    //創(chuàng)建 div 元素
    $("body").append(tooltip);
    //把它追加到文檔中             
    $("#tooltip")
      .css({
        "top": (e.pageY+y) + "px",
        "left": (e.pageX+x) + "px"
      }).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示
 }).mouseout(function(){
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除 
 }).mousemove(function(e){
    $("#tooltip")
      .css({
        "top": (e.pageY+y) + "px",
        "left": (e.pageX+x) + "px"
      });
  });
})
//]]>
</script>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: