东软学习，一个简单的jQuery鼠标滑过div放大缩小

不三郭四

于 2014-08-26 20:12:10 发布

阅读量513

点赞数

分类专栏：东软学习笔记

本文链接：https://blog.csdn.net/u010095995/article/details/38852739

版权

东软学习笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>Document</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type = "text/javascript">
		$(document).ready(
		function()
		{
			$("#box").mouseout(
				function()
				{
					$("#box").animate({height:"100px"});
				}
			);
			$("#box").mouseover(
				function(){
					$("#box").animate({height:"300px"});
				}
			);
			$("#box1").mouseout(
				function()
				{
					$("#box1").animate({height:"100px"});
				}
			);
			$("#box1").mouseover(
				function(){
					$("#box1").animate({height:"300px"});
				}
			);
		}
	)
  </script>
 </head>
 <body>
	<div id="box" style="background:#98bf21;height:100px;width:100px; float:left"></div>
	<div id="box1" style="background:#98bf21;height:100px;width:100px;margin-left:100px;margin-top:10px;"></div>
 </body>
</html>

 <img src="https://img-blog.csdn.net/20140826203008629?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA5NTk5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />