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

雨点打透心脏的1/2处 2022-03-10 03:38 610阅读 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 条评论，610人围观）

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

相关阅读

相关 html DI在DIV中上下左右居中

要在HTML中实现上下左右居中，可以使用CSS的Flexbox布局或Grid布局。下面是两种方法的示例代码：使用Flexbox布局：使用Grid布局：这两种方法都将

偏执的太偏执、/ 2024年02月21日 12:02/ 0 赞/ 72 阅读

相关上下左右手势

-(void)viewDidLoad{ UISwipeGestureRecognizer recognizer; recogniz

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

相关 js控制元素左右缓慢移动和页面上下缓慢移动

左右移动：有快到慢 ![1a2365dad24f4f9895b547ccd12619ad.gif][] 页面上下移动： ![fdabf630b7984aadb5fd1b1

系统管理员/ 2023年10月04日 18:37/ 0 赞/ 35 阅读

相关 Js自定义快捷键并实现上下左右移动

JS代码实现自定义热键实现功能： 1.自定义上下左右键 2.使用自定义热键或者使用键盘上下左右键移动图片效果图： ![在这里插入图片描述][201910

刺骨的言语ヽ痛彻心扉/ 2023年06月08日 06:43/ 0 赞/ 115 阅读

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

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

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

相关 jQuery实现div左右滑动

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

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

相关 Jquery实现鼠标移动div

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

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

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

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

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

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

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

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

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

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

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