Question

再次，在这里处理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检查元素返回image.js第3行有错误，说＆＃34; $未定义＆＃34;。任何帮助表示赞赏。

Answer 1

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

$(document).ready(function(){
	randomlyMoveImage();
});

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{
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="image" src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xap1/t39.2365-6/851565_602269956474188_918638970_n.png">

jQuery动画让png出现在屏幕上的随机点？

1 个答案: