10 image effects that can be implemented using JavaScript

Generally, when writing a blog or website, we need to make some effects on the illustrations, such as adding shadows, rounded corners, and reflecting images. These effects can generally be implemented in three ways. One is to use PS to modify the image, the other is to use CSS, and the third is to use JavaScript. Using PS will destroy the source image, and it takes some time. Netzgesta has a lot of JavaScript code for downloading image effects, and many of the results are pretty good.

1. Reflecting water

This JS will be a special effect for image reflection, which is very popular with Web websites nowadays.

If you prefer to generate a water ing effect online, refer to here.

JS download link

2. rounded corner + shadow

You may remember to use roundpic to generate a rounded image online. In fact, this JS can also achieve the effect.

JS download link

3. Highlighted rounded corner shadow

This effect can be used as a button. Is one of my favorite special effects.

JS download link

4. Oblique shadow effect

It looks very similar to the above, but it is also different.

JS download link

5. Photo Frame Effect

If you are working on an Image blog, you will like this Js. After using it, all the images in the blog post will have the effect of photo frames.

JS download link

6. Black Photo Frames

If you do not like the white image frame without stereoscopy, try the JS effect with sufficient stereoscopy.

JS download link

7. magnifiers

A very interesting js to achieve a magnifier effect. I remember when I was a Google developer last year, a speaker also talked about how to implement a magnifier in Gmaps. Click here for details.

JS download link

8. philin Effect

If you are writing a movie blog, this effect may make you like it.

JS download link

9. Lace Effect

Simple image lace effect.

JS download link

10. Paging Effect

Page turning is very common. Google will find many related tutorials. If you don't want to spend time learning, download this JS directly.

JS download link

Installation and usage:

Decompress the downloaded compressed package and upload it to the website space. Then, add code to the head that needs to display the effect, such as the highlighted shadow effect glossy. The added code is:

<SCRIPT type = "text/JavaScript" src = "glossy. js"> </SCRIPT>

For WordPress, you can add it in header. php. If you only want to see results on the article page, you can also consider adding them in single. php.

Then, add the following to the mark of the image to display the special effect:

Class = "glossy"

In this way, the effect will appear.

The method for adding other effects is similar.

Via blogohblog.