<!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鼠標移入移出改變圖片大小動畫的實現（完整源代碼）-魏泯
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章