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 中常见的图片操作需求，可以根据实际项目情况进行调整和扩展。