Javascript jQuery动画使png显示在屏幕上的任意点?

Javascript jQuery动画使png显示在屏幕上的任意点?,javascript,jquery,Javascript,Jquery,再一次,在这里进行Chrome扩展。这一次,我希望在窗口中的任意位置显示一个透明的png。我觉得我可以以某种方式使用jQuery.animate()?我想让图像出现在屏幕上某个随机的地方,或者让它出现在屏幕上某个随机元素的顶部,无论是图像的文本,等等。我甚至不知道从哪里开始。有什么想法吗?感谢所有的意见! 编辑:这是我的image.js文件: var image = "image"; chrome.extension.getURL('image.png'); $(document).ready(

再一次,在这里进行Chrome扩展。这一次,我希望在窗口中的任意位置显示一个透明的png。我觉得我可以以某种方式使用jQuery.animate()?我想让图像出现在屏幕上某个随机的地方,或者让它出现在屏幕上某个随机元素的顶部,无论是图像的文本,等等。我甚至不知道从哪里开始。有什么想法吗?感谢所有的意见! 编辑:这是我的image.js文件:

var image = "image";
chrome.extension.getURL('image.png');
$(document).ready(function(){
    randomlyMoveImage();
});
$("#image").css({
    "position": "absolute",
});
$("#image").attr("src", image.png);
function randomlyMoveImage(){
    var width = $(document).width();
    var height = $(document).height();

    var x = Math.floor((Math.random() * width) + 1);
    var y = Math.floor((Math.random() * height) + 1);
    $( "#image" ).animate({
    left: x,
          top: y
}, 0, function() {
    // Animation complete.
  });

    setTimeout(randomlyMoveImage, 3000);
}
$("#image").css({
    "position": "absolute",
});
这是我的manifest.json:

{
  "manifest_version": 2,

  "name": "Animation",
  "description": "Animation",
  "version": "1.0",
  "web_accessible_resources": ["image.png"],

  "browser_action": {
    "default_icon": "image.png",
    "default_title": "Animation"
  },
  "content_scripts": [
        {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["jquery.min.js"]
        }
    ],
  "background": {
  "scripts": ["extensionListener.js","audio.js"],
  "persistent": false
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

Chrome inspect元素返回image.js第3行有错误,表示“$未定义”。非常感谢您的帮助。

这是您需要的,希望它能帮助您,谢谢。请添加jquery库以使其正常工作。间隔3秒后,它将随机改变图像的位置

$(文档).ready(函数(){
随机移动图像();
});
函数randomlyMoveImage(){
var width=$(文档).width();
var height=$(document.height();
var x=数学地板((数学随机()*宽度)+1);
变量y=数学楼层((数学随机()*高度)+1);
$(“#图像”)。设置动画({
左:x,,
顶部:y
},0,函数(){
//动画完成。
});
setTimeout(randomlyMoveImage,3000);
}
#图像{
位置:绝对位置;
}


请在下面找到我的答案,我希望它能起作用,您可以根据您的扩展要求进行更改。单击“运行代码片段”查看实况演示。一般来说,您应该让javascript正常工作,然后找出如何将其变成扩展。您是一个绝对的天才!非常感谢你!但是,作为Chrome扩展的新手,我应该把声明图像值的html放在哪里?非常感谢你!看这可能是它可以帮助你:我已经摆弄了一些代码,声音会播放,但图像将不会出现在所有。我在Inspect元素的调试器中得到的只是“uncaughtReferenceError:$”未在image.js的第3行定义。请参阅我关于my image.js和my manifest.json的问题。对不起,那天我没有看到您的评论,您似乎没有包括jquery库,或者您的js在image.js中提到的第3行之前的某个地方崩溃了