Several common JavaScript image effects

As a dynamic and interactive programming language, JavaScript has become an indispensable part of Web development. Among them, JavaScript provides a wealth of effects and methods for image processing and presentation, allowing us to achieve a variety of stunning visual effects on web pages and improve the user experience. Next, this article will introduce several common JavaScript image effects.

1. Picture carousel

Picture carousel is a common picture effect on web pages, which can display multiple pictures in turn at the same position. This effect is not only beautiful and practical, but can also bring more traffic to the website. In JavaScript, the basic principle of implementing carousel images is to continuously switch image addresses and related style sheets through timers and arrays.

The following is a simple image carousel example:

HTML:

<div>
  <img  class="active lazy" src="/static/imghwm/default1.png" data-src="img1.jpg" alt="Several common JavaScript image effects" >
  <img  src="/static/imghwm/default1.png" data-src="img2.jpg" class="lazy" alt="Several common JavaScript image effects" >
  <img  src="/static/imghwm/default1.png" data-src="img3.jpg" class="lazy" alt="Several common JavaScript image effects" >
</div>

CSS:

#slider img {
  display: none;
  width: 100%;
}
  
#slider img.active {
  display: block;
}

JavaScript:

let sliderImages = document.querySelectorAll('#slider img');
let currentImageIndex = 0;

setInterval(() => {
  sliderImages[currentImageIndex].classList.remove('active');
  currentImageIndex = (currentImageIndex + 1) % sliderImages.length;
  sliderImages[currentImageIndex].classList.add('active');
}, 3000);

二, Image preloading

Image preloading can load image resources in advance before the image is actually displayed. This can ensure that the image is displayed smoothly on the page and improve the user experience of the website. In JavaScript, image preloading is mainly achieved by creating a new Image object and preloading the image by setting the src attribute in the object.

The following is a simple image preloading example:

JavaScript:

function preloadImage(url) {
  let img = new Image();
  img.src = url;
}

preloadImage("img1.jpg");
preloadImage("img2.jpg");
preloadImage("img3.jpg");

3. Image dragging

Image dragging allows users to slide Control images through , drag and drop operations to enhance the interactivity of the website. In JavaScript, the drag operation of the image is implemented by listening to mouse events.

The following is a simple image dragging example:

HTML:

<div>
  <img  src="/static/imghwm/default1.png" data-src="img.jpg" class="lazy" alt="Several common JavaScript image effects" >
</div>

CSS:

#image-container {
  position: relative;
}
  
#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
}

JavaScript:

let image = document.querySelector('#image-container img');
let isDragging = false;
let startX, startY;

image.addEventListener('mousedown', function(event) {
  isDragging = true;
  startX = event.clientX - image.offsetLeft;
  startY = event.clientY - image.offsetTop;
});
  
image.addEventListener('mousemove', function(event) {
  if (isDragging) {
    image.style.left = (event.clientX - startX) + 'px';
    image.style.top = (event.clientY - startY) + 'px';
  }
});

image.addEventListener('mouseup', function(event) {
  isDragging = false;
});

four , Picture blur

Picture blur is a special effect commonly used in web pages, which can blur pictures and make the visual effect of the website softer. In JavaScript, use the filter attribute in CSS to achieve the image blur effect.

The following is a simple image blur example:

HTML:

<img  src="/static/imghwm/default1.png" data-src="img.jpg" class="lazy" alt="Several common JavaScript image effects" >

CSS:

#blur-image {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

In the code, we can adjust the blur function Parameter value to adjust the blur level of the image.

The above are several common JavaScript image effects. Of course, JavaScript has many other image effects, such as image resizing, image filters, etc. We can choose the appropriate technology to implement it according to specific needs. In short, in the web development process, adding JS image effects is a good way to improve user experience.

The above is the detailed content of Several common JavaScript image effects. For more information, please follow other related articles on the PHP Chinese website!