首页 > 软件开发 > JQUERY >

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

来源:互联网 2023-03-17 00:46:34 186

jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

工具/原料

  • Dreamweaver软件

方法/步骤

  • 1

    打开Dreamweaver软件,ctrl n新建一个html文件并保存xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

  • 2

    在body建立标签h1和div标签:xV9办公区 - 实用经验教程分享!

    h1>点击我/h1>xV9办公区 - 实用经验教程分享!

    div>/div>xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

  • 3

    在head中建立style标签,进行对div的修饰xV9办公区 - 实用经验教程分享!

    style>xV9办公区 - 实用经验教程分享!

    div{width:200px;height:200px;background-color:blue;position:relative;}xV9办公区 - 实用经验教程分享!

    /style>xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

  • 3该信息未经授权抓取自百度经验
  • 4

    将jquery文件调用到head中,如图xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

  • 5

    建立script标签,在里面添加对文件的修饰,当点击h1时,div发生移动变化,先向右移动200px,再向下移动200px,最后回到原来位置xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    script>xV9办公区 - 实用经验教程分享!

    $("h1").click(function(){xV9办公区 - 实用经验教程分享!

    $("div").animate({left:200})xV9办公区 - 实用经验教程分享!

    $("div").animate({top:200})xV9办公区 - 实用经验教程分享!

    $("div").animate({left:0})xV9办公区 - 实用经验教程分享!

    $("div").animate({top:0})xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    })xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    /script>xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

  • 6

    可以简化为:xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    script>xV9办公区 - 实用经验教程分享!

    $("h1").click(function(){xV9办公区 - 实用经验教程分享!

    $("div").animate({left:200})xV9办公区 - 实用经验教程分享!

    .animate({top:200})xV9办公区 - 实用经验教程分享!

    .animate({left:0})xV9办公区 - 实用经验教程分享!

    .animate({top:0})xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    })xV9办公区 - 实用经验教程分享!

    xV9办公区 - 实用经验教程分享!

    /script>xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

    jquery点击事件-点h1,div移动4步回到原来位置xV9办公区 - 实用经验教程分享!

  • 注意事项

    • 如果此经验对您有帮助,请为我投票加关注,谢谢大家的支持^_^

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!xV9办公区 - 实用经验教程分享!


    标签: JQUERY软件DREAMWEAVER

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码