jquery点击事件-点h1,div移动4步回到原来位置

时间:2026-02-13 20:28:59

1、打开Dreamweaver软件,ctrl+n新建一个html文件并保存

jquery点击事件-点h1,div移动4步回到原来位置

2、在body建立标签h1和div标签:

<h1>点击我</h1>

<div></div>

jquery点击事件-点h1,div移动4步回到原来位置

3、在head中建立style标签,进行对div的修饰

<style>

div{width:200px;height:200px;background-color:blue;position:relative;}

</style>

jquery点击事件-点h1,div移动4步回到原来位置

jquery点击事件-点h1,div移动4步回到原来位置

4、将jquery文件调用到head中,如图

jquery点击事件-点h1,div移动4步回到原来位置

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>

jquery点击事件-点h1,div移动4步回到原来位置

jquery点击事件-点h1,div移动4步回到原来位置

6、可以简化为:

<script>

$("h1").click(function(){

$("div").animate({left:200})

.animate({top:200})

.animate({left:0})

.animate({top:0})

})

</script>

jquery点击事件-点h1,div移动4步回到原来位置

jquery点击事件-点h1,div移动4步回到原来位置

© 2026 一点资料
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com