How to achieve the reflection effect of pictures in water with jquery

With the continuous development of Internet technology, the level of web design is getting higher and higher, and more and more special effects and animation effects are being applied to web design. Among them, the reflection effect in water is a very popular effect. It can make ordinary pictures more interesting and attractive, and make web pages more vivid. This article will introduce how to use jQuery to achieve the reflection effect of pictures in water.

1. Effect implementation ideas

Let’s first take a look at the implementation ideas for the reflection effect in the picture:

1. In the HTML page, use a div container to contain two subtitles Elements: a picture element and an empty div element, the latter used to display water reflections.
2. Use CSS styles to set the styles of the container and sub-elements, and set the position, z-index and other attributes to overlap the image and the reflection element in the water.
3. Use jQuery to manipulate DOM elements, invert the picture elements, and then add them to the water reflection elements.
4. By setting the opacity, filter and other styles of the water reflection element, it will show the water reflection effect.

2. Specific implementation steps

Before starting the implementation, a sample code is given for your reference. The HTML code is as follows:

<div class="wrap">
  <img src="image.jpg" alt="">
  <div class="mirror"></div>
</div>

The CSS code is as follows:

.wrap {
  position: relative;
  width: 400px;
  height: 300px;
}
img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.mirror {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100px;
  background: url(image.jpg) no-repeat;
  background-size: cover;
}

The jQuery code is as follows:

var mirror=$('.mirror');
var img=$('img').clone().css({
  'transform':'rotateX(180deg)',
  '-webkit-transform':'rotateX(180deg)',
  'opacity':'0.7',
  'filter':'alpha(opacity=70) blur(2px)'
});
mirror.append(img);

Next, we introduce the specific implementation steps in detail:

1. First, create a div container in the HTML code to contain picture elements and water reflection elements. The class of the container is wrap. Inside the container, create an img element and a div element to display pictures and water reflections respectively. The class of the water reflection element is mirror.

2. Next, set the styles of the container and child elements through CSS styles. The container needs to set the position: relative attribute, width and height to facilitate positioning of child elements. The img element needs to set the position: absolute attribute, the distance between the left and top, and the z-index value for position overlay with the reflection element in the water. The mirror element also needs to set the position: absolute attribute, the distance between the left and bottom, and the z-index attribute for display under the img element.

3. Then, we manipulate the DOM elements through jQuery. First, define a variable mirror to represent the reflection element in the water, and define a variable img to represent the copied image. Use the clone() method to clone the img element and set the style of the img element. Note: The img element needs to be reversed here to give it a mirror effect. The specific implementation is to use the transform attribute to rotate and set its rotateX value to 180 degrees.

4. Add the reversed img element to the mirror element, and set the opacity and filter styles to make the picture show the reflection effect in the water. Set the value of the opacity attribute to 0.7, which means setting the opacity of the reflection element in the water to 70%. Use the alpha filter charset=utf-8 to set the transparency of the element, and use the blur filter to set the blur of the element.

3. Effect display

Through the implementation of the above steps, we can add the water reflection effect of pictures to the web page to make the page more vivid and interesting. The following is a screenshot of the effect display:

As shown in the picture, the reflection effect in the water of the picture is very realistic, making the webpage effect even more outstanding. By using jQuery's DOM operation method, you can not only achieve the reflection effect of pictures in water, but also apply it to other picture special effects, which is one of the necessary skills for front-end developers.

4. Summary

This article introduces the specific implementation steps of how to use jQuery to achieve the reflection effect in water in pictures. Through the implementation of the above steps, we can add the water reflection effect of pictures to the web page very conveniently and quickly, making the web page more vivid and interesting. At the same time, mastering jQuery DOM operation skills is also of great significance to front-end developers. I hope readers can study it carefully.

The above is the detailed content of How to achieve the reflection effect of pictures in water with jquery. For more information, please follow other related articles on the PHP Chinese website!