jquery plugins for larger image hover effect for larger image

Jquery plugins all know are very strong, recently shared point jquery plug-in effects, easy to use development effect.

A, HTML Code

<! DOCTYPE HTML the PUBLIC "- // the W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns = "HTTP : //www.w3.org/1999/xhtml "> 
<head> 
<Meta HTTP-equiv =" the Type-the Content "Content =" text / HTML; charset = UTF-. 8 "/> 
<title> jQuery image zoom plugin Magnifying the mouse over the picture </ title> 
<Meta name = "the Description" Content = "jQuery plug-in to a larger image when mouse over the picture, the picture by scaling magnification effect. .jQuery animated images to enlarge show special effects plug-ins." /> 
</ head> 

<body> 

<Script type = "text / JavaScript" the src = "JS / jQuery-1.4.2.min.js"> </ Script> 
<Script type = "text / JavaScript" the src = " JS / jquery.zoomImgRollover.js "> </ Script> 
<script type="text/javascript">
$(document).ready(function() {
    $("#testimg").zoomImgRollover();
});
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:544px;margin:20px auto;}
</style>

<div class="demo">
	<a href='http://www.3mooc.com/' style="border:1px solid #000;">
		<img id="testimg" width="400" height="564" src="images/132ad.jpg" alt="" border="0">
	</a>
</div>

</body>
</html>

Second, the plug-in code (plugin name: jquery.zoomImgRollover.js)

(function(jQuery){ 

	jQuery.fn.zoomImgRollover = function(options) {

		var defaults = {
			percent:30,
			duration:600
		}; 

		var opts = jQuery.extend(defaults, options);
		
		// static zoom function
		function imageZoomStep(jZoomImage, x, origWidth, origHeight)
		{
			var width = Math.round(origWidth * (.5 + ((x * opts.percent) / 200))) * 2;
			var height = Math.round(origHeight * (.5 + ((x * opts.percent) / 200))) * 2;
				
			var left = (width - origWidth) / 2;
			var top = (height - origHeight) / 2;
		
			jZoomImage.css({width:width, height:height, top:-top, left:-left});
		}

		return this.each(function()
		{
			var jZoomImage = jQuery(this);
			var origWidth = jZoomImage.width();
			var origHeight = jZoomImage.height();
			
			// add css ness. to allow zoom
			jZoomImage.css({position: "relative"});
			jZoomImage.parent().css({overflow: "hidden", display:"block", position: "relative", width: origWidth, height: origHeight});
			
			jZoomImage.mouseover(function()
			{
				jZoomImage.stop().animate({dummy:1},{duration:opts.duration, step:function(x)
				{
					imageZoomStep(jZoomImage, x, origWidth, origHeight)
				}});
			});

			jZoomImage.mouseout(function()
			{
				jZoomImage.stop().animate({dummy:0},{duration:opts.duration, step:function(x)
				{
					imageZoomStep(jZoomImage, x, origWidth, origHeight)
				}});
			});
		});
	};

})(jQuery);

jquery plugins for larger image hover effect for larger image

Guess you like