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

 时间:2024-10-12 18:07:41

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步回到原来位置
  • css如何去掉div的背景色
  • ps怎么制作动感文字效果
  • Dw CC 2018怎么关闭使用临时文件预览
  • PS中的“等高线”滤镜和“风”滤镜介绍
  • axure怎么统计多行文本框输入的文字数?
  • 热门搜索
    土茯苓的功效与作用 破折号的作用有哪些 运动会新闻稿300字 汉字属于什么文字 醋三棱的功效与作用 宫颈炎用什么药好 不解风情什么意思 信托公司是做什么的 蚂蚁粉的功效与作用 鹌鹑蛋的作用以及功能