How to realize the big picture effect of mouse over the preview picture by jQuery

This article mainly explains "jQuery how to achieve the mouse over the preview picture big picture effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "jQuery how to achieve the mouse over the preview picture big picture effect" bar!

The demand is like this: the mouse moves on the picture, and the large image of the preview is displayed at the same time, and when the mouse is removed, it is hidden.

The principle is actually very simple. First, you need a div, and then dynamically add it through the jQuery method.

Label, change this.

The style (width, height) and the image path to be displayed.

Js Code:

$(function () {var ei = $("# large"); ei.hide (); $("# img1, img") .mousemove (function (e) {ei.css ({top:e.pageY,left:e.pageX}). Html ('

') .show ();}) .mouseout (function () {ei.hide ();}) $("# F1") .change (function () {$("# img1") .attr ("src", "file:///"+$("#f1").val());})}))

HTML section:

Upload preview image:

Mouse over the preview picture:

At this point, I believe that everyone on the "jQuery how to achieve mouse over the preview picture big picture effect" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!