jquery点击单张图片放大效果

最新推荐文章于 2024-07-10 10:06:23 发布

没有伞就要努力奔跑

最新推荐文章于 2024-07-10 10:06:23 发布

阅读量1w

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_28342873/article/details/52943327

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单图放大</title>
		<link rel="stylesheet" href="css/lrty/lrtk.css" />
		<script type="text/javascript" src="js/jquery/jquery-1.11.1.min.js" ></script>
		<style type="text/css">  
			#div1{ width:600px; height:400px; margin:50px auto; position:relative;  text-align: center; padding-left:50px;}  
			#div1 img{ position:absolute; left:0; top:0; margin: 0 auto;}  
		</style>  
		<script type="text/javascript">  
		     $(function(){  
		        $('#div1 img').mouseenter(function(){  
		            var wValue=1.5 * $(this).width();  
		            var hValue=1.5 * $(this).height();        
		            $(this).stop().animate({width: wValue,  
		                            height: hValue,  
		                            left:("-"+(0.5 * $(this).width())/2),  
		                            top:("-"+(0.5 * $(this).height())/2)}, 1000);  
		        }).mouseleave(function(){  
		            $(this).stop().animate({width: "100",  
		                                         height: "80",  
		                                         left:"0px",  
		                                         top:"0px"}, 1000 );  
        		});  
    		});   
	</script> 
	</head>
	<body>
		<div id="div1">
			<img src="images/01.jpg" width="100px" height="80px"/>
		</div>
		 
	</body>
</html>