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

最新推荐文章于 2023-07-15 11:23:04 发布

qq_36727889

最新推荐文章于 2023-07-15 11:23:04 发布

阅读量5.2k

点赞数 2

本文链接：https://blog.csdn.net/qq_36727889/article/details/88364866

版权

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>