How to change the background image of a web page using JQuery code

With the trend of modern web design, background images play an important role in web page production. It can be used as an important element of the web page to provide users with a better visual experience. In this article, we will explore how to change the background image of a web page using JQuery code.

JQuery is a popular JavaScript library that simplifies JavaScript programming and provides many predefined functions to easily manipulate the DOM, handle events and create animations, etc. By using JQuery, we can easily achieve interactive effects in web pages with a few lines of code.

There are many ways to change the background image using JQuery. The following is a demonstration of several of them.

1. Click to change background image

The following is a simple sample code where clicking a button changes the background image of a web page.

$(document).ready(function(){
   $("button").click(function(){
      $("body").css("background-image", "url('new-background.jpg')");
   });
});

In this example, we use JQuery's click() event to ensure that the code is launched when the button is clicked. We also use the css() method to set a new background image in background-image. Replace "new-background.jpg" with the appropriate path to insert the code into your web page.

2. Automatically change the background image

The following is a sample code that automatically changes the background image. In this example, we will apply a transition effect to the web page.

$(document).ready(function(){
   var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
   var currentIndex = 0;
   var interval = setInterval(changeImage, 5000);

   function changeImage() {
      currentIndex++;
      if (currentIndex == images.length) {
         currentIndex = 0;
      }

      $("body").css("background-image", "url(" + images[currentIndex] + ")");
      $("body").fadeOut(1000, function() {
         $("body").fadeIn(1000);
      });
   }
});

In this example, we use the setInterval() function to change the background image periodically, and use the fadeOut() and fadeIn() methods to create a smooth transition effect.

3. Scrolling background image

The following is an example to scroll the background image. In this example, we recommend 2400 px for the image. Once the code is added to a web page, it will automatically change the background image on a scrolling basis.

$(document).ready(function(){
   var currentPosition = 0;
   var interval = setInterval(changePosition, 50);

   function changePosition() {
      currentPosition -= 1;
      $("body").css("background-position", currentPosition + "px 0");
   }
});

In this example, we use the setInterval() function to move the background image every 50 milliseconds. The background image will scroll smoothly, set to a negative value.

Summary:
In this article, we demonstrate through several examples how to use JQuery code to change the background image of a web page. JQuery makes writing JavaScript much easier while providing many features that make it easy to manipulate the DOM and handle events. Different techniques can be used to achieve different effects, and the choice of technique depends on personal preference and the needs of the website.

The above is the detailed content of How to change the background image of a web page using JQuery code. For more information, please follow other related articles on the PHP Chinese website!