图片 jquery
jQuery 图片操作
jQuery 提供了多种方法来操作图片，包括加载、显示、隐藏、调整大小等。以下是一些常用的 jQuery 图片操作方法。
加载图片
使用 attr() 方法动态加载图片：
$("#myImage").attr("src", "path/to/image.jpg");显示/隐藏图片
使用 show() 和 hide() 方法控制图片的显示状态：
$("#myImage").show(); // 显示图片
$("#myImage").hide(); // 隐藏图片调整图片大小
通过 css() 方法调整图片的宽度和高度：
$("#myImage").css({
"width": "200px",
"height": "150px"
});jQuery 图片懒加载
懒加载可以提升页面性能，延迟加载图片直到用户滚动到它们的位置。
使用 data-src 属性存储图片路径
<img data-src="path/to/image.jpg" class="lazy-load">监听滚动事件加载图片
$(window).scroll(function() {
$(".lazy-load").each(function() {
if ($(this).isInViewport()) {
$(this).attr("src", $(this).data("src"));
$(this).removeClass("lazy-load");
}
});
});
// 检查元素是否在视口中
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};jQuery 图片轮播
创建一个简单的图片轮播效果。
HTML 结构
<div class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<button class="prev">Previous</button>
<button class="next">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");
});jQuery 图片预览
实现点击图片后显示大图预览。
HTML 结构
<img src="thumbnail.jpg" class="thumbnail">
<div class="preview">
<img src="" class="preview-image">
<span class="close">×</span>
</div>jQuery 预览逻辑
$(".thumbnail").click(function() {
var src = $(this).attr("src");
$(".preview-image").attr("src", src);
$(".preview").fadeIn();
});
$(".close").click(function() {
$(".preview").fadeOut();
});jQuery 图片滤镜效果
通过 CSS 和 jQuery 为图片添加滤镜效果。
HTML 结构
<img src="image.jpg" class="filter-image">
<select id="filter">
<option value="none">None</option>
<option value="grayscale">Grayscale</option>
<option value="blur">Blur</option>
</select>jQuery 滤镜逻辑
$("#filter").change(function() {
var filter = $(this).val();
$(".filter-image").css("filter", filter);
});这些方法涵盖了 jQuery 中常见的图片操作需求，可以根据实际项目需求进行调整和扩展。
