jquery 图片
jQuery 图片操作
jQuery 提供了多种方法来操作图片，包括加载、显示、隐藏、调整尺寸等。以下是一些常见的图片操作方法：
动态加载图片
使用 attr() 方法可以动态修改图片的 src 属性：
$("#myImage").attr("src", "new-image.jpg");显示和隐藏图片
通过 show() 和 hide() 方法控制图片的可见性：
$("#myImage").show(); // 显示图片
$("#myImage").hide(); // 隐藏图片调整图片尺寸
使用 width() 和 height() 方法可以获取或设置图片的尺寸：
$("#myImage").width(200); // 设置宽度为200px
$("#myImage").height(150); // 设置高度为150px图片预加载
通过创建一个隐藏的 Image 对象实现图片预加载：
var img = new Image();
img.src = "preload-image.jpg";
$(img).on("load", function() {
console.log("图片预加载完成");
});图片懒加载
结合滚动事件实现图片懒加载，节省带宽：
$(window).scroll(function() {
$("img.lazy").each(function() {
if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
$(this).attr("src", $(this).data("src"));
$(this).removeClass("lazy");
}
});
});图片点击事件
为图片添加点击事件，实现放大或切换功能：
$("#myImage").click(function() {
$(this).toggleClass("enlarged");
});图片轮播实现
使用 jQuery 可以轻松实现图片轮播效果。以下是一个简单的轮播示例：
HTML 结构
<div class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>jQuery 代码
$(".next").click(function() {
var current = $(".slider img.active");
var next = current.next();
if (next.length === 0) {
next = $(".slider img:first");
}
current.removeClass("active");
next.addClass("active");
});
$(".prev").click(function() {
var current = $(".slider img.active");
var prev = current.prev();
if (prev.length === 0) {
prev = $(".slider img:last");
}
current.removeClass("active");
prev.addClass("active");
});图片滤镜效果
通过修改 CSS 属性实现简单的图片滤镜效果：
黑白滤镜
$("#myImage").css({
"filter": "grayscale(100%)",
"-webkit-filter": "grayscale(100%)"
});模糊效果
$("#myImage").css("filter", "blur(5px)");亮度调整
$("#myImage").css("filter", "brightness(150%)");响应式图片处理
根据窗口大小调整图片显示方式：
窗口大小变化监听
$(window).resize(function() {
if ($(window).width() < 768) {
$("img.responsive").attr("src", "mobile-image.jpg");
} else {
$("img.responsive").attr("src", "desktop-image.jpg");
}
});图片自适应容器
$("img.auto-resize").each(function() {
$(this).css({
"width": "100%",
"height": "auto"
});
});这些方法涵盖了 jQuery 中常见的图片操作需求，可以根据实际项目情况进行调整和扩展。
