您的位置：首页 > Web前端 > JQuery

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

2014-08-26 20:12 525 查看

<!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="http://img.blog.csdn.net/20140826203008629?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA5NTk5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航