jquery-Mouse after displaying a large image and follow the mouse effect plug-in

By Zhangxinxu from http://www.zhangxinxu.com this address: http://www.zhangxinxu.com/wordpress/?p=281

Today after reading the "JavaScript language essence" This book, still have time, decided to write the jquery plugin to practice practiced hand, the effect is that the mouse moved to the thumbnail will show a larger image of the graph, and the large image follow the mouse movement, or move to the hint text, you can also display the picture. and the direction of the discriminant function, specifically, if the thumbnail in the left half of the page, the larger image is displayed on the right side of the mouse, if the thumbnail in the right half of the page, the preview of the large image on the left side of the mouse display.

See the following:

Image Zoom Preview Effect

brief description of how to use it: 1. The href attribute of the A tag is required, and the principle of this jquery plugin is that when the mouse is moved to the thumbnail (or linked text), a large HTML fragment containing an HREF-pointing path is loaded, which is absolutely positioned according to the position of the mouse. The result is an effect of moving the mouse over the thumbnail to show the large image. The address of the large map is the content of the href attribute of the A tag. For example: <a href= "xx.jpg" > Thumbnails </a> if this a tag contains a way to display a large image, the page displays the image of the "xx.jpg" that the href points to. 2. The method used is: Target selector. Preview (); For example, the above <a href= "xx.jpg" > Thumbnail </a> can use $ ("a"). Preview (); This code implements the mouse to "thumbnail" This text link shows the effect of xx.jpg this picture. 3. Only supports images in png,gif,jpg,bmp Four formats, you can modify the type of picture format supported by the regular expression extension of the plugin code.

Here is: demo Instance page | source File Download

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com] This address: http://www.zhangxinxu.com/wordpress/?p=281

jquery-Mouse after displaying a large image and follow the mouse effect plug-in