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的元素中的图片