選擇性地顯示背景圖像

Question

我正在嘗試創建一個有球的交互式頁面。當我點擊它時，頁面上會出現2-3個隨機球。點擊時，每個人都會產生2-3個自己的頁面，頁面會慢慢填滿這些球。我已經使用Jquery完成了這部分。

現在頁面有一個背景圖像，對用戶是隱藏的，他看到的只是'白色'。當一個新球出現時，它後面的一個圓形區域（區域的大小是球的兩倍）變得透明，以顯示背景圖像的那一部分，類似於帝國時代基於地圖顯示的地圖玩家去。

如何根據新創建的div的位置實現背景圖像的選擇性顯示？它甚至可以使用jquery/css和NO flash來完成嗎？

用於創建新的球我的jQuery代碼看起來是這樣的：

$(document).on("click",".ball_link", function makeDiv(){ 
count=0; 
//ajax code to fetch no. of divs to be created from table 

    while(count< no_of_divs) 
    { 

    //code to calculate random x,y coordinates and save them to posx and posy 

    var newdivid='div'+count; 
    $newdiv = $('<div/>').css({ 
    'position':'absolute', 
    'left':posx+'px', 
    'top':posy+'px', 
    'display':'none', 
    'background':'ball.png' 
    }).appendTo('.page-wrap').delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300); 
    count++; 
    } 
}); 

Answer 1

您可以使用CSS background-clip， background-position和border-radius。你新創建的div應該大於'ball.png'，並有一些邊界半徑，所以它們顯示爲圓圈。

然後你可以設置背景位置等於負div的位置：
如果DIV是left: 100px; top: 40px然後background-position應該是：-100px -40px

工作樣本這裏：http://jsfiddle.net/bndcS/

編輯

請看這裏的小提琴：http://jsfiddle.net/UX3B6/'球'出現效果和延遲。
CSS的只有一行有:-)

EDIT 2

至於背景和它的負座標添加：假設你有一個大的div在後臺一個良好的形象。現在你在大牌上面創建一個小的div。您將其設置在左上角（0,0），並將背景設置爲大div的相同圖像。圖像完美匹配。現在你想移動你的小div一點（讓20px正確，20px下來）。現在圖像不匹配 - 爲了使事情再次工作，你需要移動小div的背景圖像在相反的方向移動div本身，因此負座標：（20px左邊，20px up = -20px）

Answer 2

您可以使用CSS3過渡這裏是樣本和教程可能有用

http://css3.bradshawenterprises.com/transitions/