如何使用JQuery拖动运动图像?

时间:2017-01-01 20:09:37

标签: javascript jquery html css draggable

您好我是JQuery或java的新手,实际上我是编程新手!我做了jQUERY的基本教程并使用Jquery制作游戏。我坚持一件事,也不确定我的代码是否正确无论如何这里是我的代码..

var b = function($b, speed) {
    var beeWidth = $b.width();

    $b.animate({
        "right": "90%",
        "left": "90%"
    }, speed, function() {
        $b.animate({
            "left": 0 - beeWidth + "px"
        }, speed, function() {
            b($b, speed);
        });
    });

};
$(function() {
    b($("#b"), 5000);
    b($("#bOne"), 4500);
    b($("#bTwo"), 4000);
    b($("#bThree"), 3500);
    b($("#bfour"), 3000);
    b($("#bfive"), 2500);
    b($("#bsix"), 2000);
    b($("#bseven"), 1500);
});
body * {
  display: block;
}
body {
    background-image: url("...");
}

img{
  width: 150px;
  height: 75px;
  position:relative;
  display:inline-grid;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<img id="b" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bOne" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bTwo" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bThree" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bfour" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bfive" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bsix" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bseven" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">

1 个答案:

答案 0 :(得分:0)

是的,你可以!你应该使用jQuery UI

&#13;
&#13;
$(function(){
  $( "#draggable" ).draggable();
});
&#13;
#draggable{
  width: 100px;
  height: 100px;
  background: #000;
  color: #FFF
}
&#13;
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="draggable">
  I AM DRAGGABLE
</div>
&#13;
&#13;
&#13;