<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<title></title>
</head>
<body>
<style>
#test{width:200px;height:200px;font-size:12px;transition:all 1s ease 0s;-webkit-transition: all 1s ease 0s;-moz-transition:all 1s ease 0s; -o-transition:all 1s ease 0s;}
#test:hover{-moz-transition: all 1s ease 0s;width:240px;height:240px;font-size:40px;}
.test1{width:200px;height:200px;}
</style>
<!-- css3实现 -->
<div style="width:200px;height:200px;overflow: hidden;">
<img id="test" src="store_logo_280x0.jpg"/>
</div>
<!-- jq实现 -->
<div style="width:200px;height:200px;overflow: hidden;">
<img class="test1" src="store_logo_280x0.jpg"/>
</div>
<script>
$(".test1").mouseover(function()
{
$(this).animate({height:240,width:240,},1000);
});
$(".test1").mouseout(function()
{
$(this).animate({height:200,width:200,},1000);
});
</script>
</body>
</html>
经过测试绝对可靠，注意要引用jq
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-20 18:13:10