jquery图片放大插件鼠标悬停图片放大效果

Posted ganjiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery图片放大插件鼠标悬停图片放大效果相关的知识，希望对你有一定的参考价值。

都知道jquery都插件是非常强大的，最近分享点jquery插件效果，方便效果开发使用。
一、html代码
<!DOCTYPE html PUBLIC "-//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="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片放大插件鼠标滑过图片放大效果</title>
<meta name="description" content="jquery图片放大插件制作一个当鼠标滑过图片，图片按等比例缩放放大效果。动画图片放大展示特效。jQuery插件。" />
</head>

<body>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" 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,imgborder:0;
.demowidth: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"  border="0">
	</a>
</div>

</body>
</html>
二、插件代码（插件名称：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图片放大插件鼠标悬停图片放大效果的主要内容，如果未能解决你的问题，请参考以下文章

html鼠标悬停左侧缩小图片放大到右边

HTML图片鼠标悬停效果设置！

css3 实现鼠标放上去图片外框不变大，里面中心放大

css+jquery 实现图片局部放大预览

Javascript：在没有 Jquery 或插件的情况下放大鼠标悬停

jQuery图片缩放插件-smartZoom使用