jquery圖片預覽

一、jquery圖片預覽插件

在網頁中，我們常常會遇到圖片需要被預覽的場景，而jquery圖片預覽可以很好地解決這個問題。我們可以使用一些現成的插件來實現圖片預覽的功能。常用的插件有：

• fancyBox
• lightBox
• colorBox

這些插件都具有界面美觀，使用方便、功能豐富的優點，我們可以根據自己的需求選擇合適的插件。

二、jquery圖片跟著滑鼠動

在網頁中，我們經常會需要圖片跟著滑鼠動的效果。使用jquery可以輕鬆實現這個功能，只需要設置圖片的css樣式即可。

  
    $("#img_id").mousemove(function(e) {
      $(this).css({
        left: e.pageX,
        top: e.pageY
      })
    })
  

三、jquery設置gif圖片

GIF圖片是一種經常用來表達動態效果的文件格式，但是在網頁中直接引用會有一些問題。jquery可以幫助我們解決這個問題，只需要使用jquery的attr()方法即可。

  
    $("#gif_id").attr("src", "gif_url")
  

四、jquery設置背景圖片

在網頁中，我們常常需要設置背景圖片，jquery可以幫助我們更方便地實現這個功能。

  
    $("#div_id").css("background-image", "url('img_url')")
  

五、jquery圖片插件

除了上述提到的圖片預覽插件，還有一些其他的jquery圖片插件也非常實用。

• jQuery Cycle Plugin – 用於創建幻燈片效果的插件
• jQuery Photoswipe – 用於移動端圖片預覽的插件
• jQuery ImgAreaSelect – 用於圖片剪裁的插件

六、jquery隱藏圖片和顯示圖片

在網頁中，我們可能需要隱藏或顯示圖片，jquery提供了非常方便的方法來實現這個功能。

  
    // 隱藏圖片
    $("#img_id").hide()

    // 顯示圖片
    $("#img_id").show()
  

七、jquery圖片在所有div上選取

jquery提供了非常強大的選擇器功能，我們可以使用選擇器來選取網頁中滿足特定條件的所有圖片。

  
    $("div img")  // 選取所有div中的圖片
    $(".class_name img")  // 選取class為class_name的元素中的圖片
    $("#div_id img")  // 選取id為div_id的元素中的圖片