如何使用jQuery实现图片慢速移动到鼠标单击后的位置，并且双击图片变大，3秒后回到原始大小

 
如图橙色小丑鱼图片效果，谢谢

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <style type="text/css">
    #img {
    position: absolute;
    left: 200px;
    top: 200px;
    transform: scale(1);
    transition: transform 400ms, left 2000ms, top 2000ms;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <img id="img" src="1.png" width="100" height="100" border="0">
    <script type="text/javascript">
    var img = $("#img");
    var iw = img.width();
    var ih = img.height();
    $(document).click(function(event){
    img.css({
    left: Math.floor(event.pageX-iw/2),
    top: Math.floor(event.pageY-ih/2)
    });
    });
    img.dblclick(function(){
    img.css({transform: "scale(2)"});
    setTimeout(function(){
    img.css({transform: "scale(1)"});
    }, 3000);})
    </script>
    </body>
    </html>