2021-05-12 14:32:11
jquery點選事件-點h1，div移動4步回到原來位置
2019-12-11 12:54:44
jquery點選事件-點h1，div移動4步回到原來位置
1
開啟Dreamweaver軟體，ctrl+n新建一個html檔案並儲存
2
在body建立標籤h1和div標籤：
<h1>點選我</h1>
<div></div>
3
在head中建立style標籤，進行對div的修飾
<style>
div{width:200px;height:200px;background-color:blue;position:relative;}
</style>
4
將jquery檔案呼叫到head中，如圖
5
建立script標籤，在裡面新增對檔案的修飾，當點選h1時，div發生移動變化，先向右移動200px，再向下移動200px,最後回到原來位置
<script>
$("h1").click(function(){
$("div").animate({left:200})
$("div").animate({top:200})
$("div").animate({left:0})
$("div").animate({top:0})
})
</script>
6
可以簡化為：
<script>
$("h1").click(function(){
$("div").animate({left:200})
.animate({top:200})
.animate({left:0})
.animate({top:0})
})
</script>
相關文章