用jQuery实现div的上下左右移动

雨点打透心脏的1/2处 2022-03-10 03:38 579阅读 0赞

html代码

<input type="button" value="向左" id="left">
       <input type="button" value="向右" id="right">
       <input type="button" value="向上" id="top">
       <input type="button" value="向下" id="bottom">
       <div></div><br>

jQuery代码

<script src="JS/jquery-3.3.1.min.js"></script>
       <script type="text/javascript">
          $(document).ready(function(){
        	 $("#left").click(function(){
        		 var b=$("div").offset().left;
        		 b=b-100;
        		 $("div").animate({left:b+'px'});
        	 });
        	 $("#right").click(function(){
        		 var b=$("div").offset().left;
        		 b=b+100;
        		 $("div").animate({left:b+'px'});
        	 });
        	 $("#top").click(function(){
        		 var a=$("div").offset().top;
        		 a=a-100;
        		 $("div").animate({top:a+'px'});
        	 });
        	 $("#bottom").click(function(){
        		 var a=$("div").offset().top;
        		 a=a+100;
        		 $("div").animate({top:a+'px'});
        	 });
          });
       </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，579人围观）

还没有评论，来说两句吧...

相关阅读

相关上下左右手势

-(void)viewDidLoad{ UISwipeGestureRecognizer recognizer; recogniz

港控/mmm°/ 2023年10月18日 13:36/ 0 赞/ 114 阅读

相关 unity3d中上下左右键控制移动

using UnityEngine; using System.Collections; public class MoveByA

ゝ一纸荒年。/ 2022年09月23日 11:50/ 0 赞/ 490 阅读

相关使用jquery实现div删除和左右移动更换顺序的功能

使用jquery实现div左右移动更换顺序 html代码 html代码 <div class="col-md-8 col-sm-8 col-x

分手后的思念是犯贱/ 2022年09月13日 11:20/ 0 赞/ 104 阅读

相关实现超级玛丽上下左右运动

用Cocos2dx实现超级玛丽，首先用帧循环定时器判断方向，再在类中实现运行以及判断是否能运动。方向控制 void LayerGame::moveMari

比眉伴天荒/ 2022年08月21日 01:27/ 0 赞/ 228 阅读

相关 jQuery实现div左右滑动

直接上代码 <body> <div class="v_out v_out_p"> <div class="prev

深藏阁楼爱情的钟/ 2022年06月10日 09:42/ 0 赞/ 348 阅读

相关 Jquery实现鼠标移动div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

待我称王封你为后i/ 2022年06月04日 04:12/ 0 赞/ 370 阅读

相关两个select左右移动、上下移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

ゞ浴缸里的玫瑰/ 2022年04月14日 05:47/ 0 赞/ 244 阅读

相关用jQuery实现div的上下左右移动

html代码 <input type="button" value="向左" id="left"> <input type="button" value

雨点打透心脏的1/2处/ 2022年03月10日 03:38/ 0 赞/ 580 阅读

相关【转载】移动开发中的上下左右滑动插件jquery.swipe.js

原文地址http://blog.csdn.net/pvfhv/article/details/3449803/\ 源码： (function($) {

r囧r小猫/ 2021年09月30日 07:50/ 0 赞/ 375 阅读

相关 JQuery实现下拉框Select选项的左右移动

某网站的一个后台界面，在“负责频道”这个区域，用户可以通过按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。执行结果如下图： ![w

﹏ヽ暗。殇╰゛Y/ 2021年09月02日 05:33/ 0 赞/ 483 阅读