Question

我想移动一个div（每个用户点击的屏幕）。我取整个屏幕的宽度和高度。比得到用户点击屏幕的x和y的坐标。现在我需要使用转换/转换来移动该div而不是使用jQuery动画函数;

$(document).ready(function () {
    $("#a").click(function (e) {
        console.log("dd")
        console.log(e.pageX);
        console.log(e.pageY);

        $('#foo').css({
            'right': '',
            'left': '0px'
        }).animate({
            'left': '30px'
        });
    })
})

谢谢

Answer 1

试试这个

<强> SCRIPT

$(document).ready(function(){
$(this).click(function(e){
    $('#foo').animate({
      'left' : e.pageX-50+'px',
      'top':e.pageY-50+'px'
   });       
   });   

});

<强> HTML

    <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

在here

上查看

Answer 2

我不确定这是否是您想要的 - 请查看JSFIDDLE - http://jsfiddle.net/MbJJ6/392/

<强> CSS

.clicked{
   -webkit-transition:1s;
   margin-left:50px;
}

<强> JS

$(document).ready(function(){

   $("#foo").click(function(e){
      console.log("dd")

      console.log(e.pageX );
      console.log(e.pageY );
      $(this).toggleClass('clicked');    
   }) ;

});

如何使用变换来改变或移动图像？

2 个答案: