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

weixin_34015860發表於2016-04-18
jQuery

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

本文例項講述了JQuery滑鼠移到小圖顯示大圖效果的方法。分享給大家供大家參考。具體分析如下：

這裡的顯示大圖功能類似上一篇《JQuery實現超連結滑鼠提示效果的方法》，稍微修改一下程式碼，就可以做出一個圖片的提示效果。

參考前面的超連結提示效果的程式碼，只需要將建立的div元素的程式碼改為：

?
1
2
3
//建立 div 元素 圖片提示
var tooltip = "<div id="tooltip"><img src=""+ this.href +"" alt="預覽圖"><\/div>";
</div>

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

可以根據超連結的title屬性值來獲得圖片相應的介紹文字，JQuery程式碼如下：

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

然後將它追加到div元素中，程式碼如下：

?
1
2
// 建立 div 元素
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產品預覽圖'/>"+imgTitle+"<\/div>";

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

?
1
2
3
4
5
6
var imgTitle;
if (this.myTitle) {
  imgTitle = "<br />" + this.myTitle;
} else {
  imgTitle = "";
}

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

本例完整程式碼如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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程式設計有所幫助。

相關文章