<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入改变图片大小</title>
<!--还是老样子，在head中导入jQuery脚本文件，以获得它所提供的独特功能-->
<script src="../../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<!--内联样式-->
<style type="text/css">
div {
width: 1000px;
height: 1000pxr;
}
/*img是行内标签,无法使用margin auto*/
img {
/*所以要用display:block；将它转换成块级元素*/
display: block;
/*之后就可以使用margin: 0 auto居中;*/
margin: 0 auto;
/*margin:0 auto;等价于：
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
也等价于margin: 0 auto 0 auto;
作为顺时针的外边距属性添加；
* */
/*设置宽高*/
height: 250px;
width: 200px;
}
</style>
</head>
<body>
<div>
<img src="../../img/cat1.png" />
</div>
</body>
<!--在body下添加javascript代码-->
<script type="text/javascript">
// 获取到img标签,并且调用绑定事件的方法，事件内容是鼠标的活动状态
$('img').on('mouseover', function() {
// this是一个很自由的可获取参数,而且不作为标签存在，所以不需要使用分界符引号或单引号囊括
// 调用动画方法,时间为1300ms
$(this).animate({
'width':'500px',
'height':'500px',
},1300);
})
$('img').on('mouseout',function(){
$(this).animate({
'width':'200px',
'height':'250px',
},1300);
})
</script>
</html>
【前端-JavaScript】H5 jQuery鼠标移入移出改变图片大小动画的实现（完整源代码）-魏泯
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章