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： - ）

编辑2

至于背景及其负坐标：假设你有一个很大的div在背景中有一个很好的图像。现在，您可以在较大的div之上创建一个小{{1}}。您将其设置在左上角（0,0）并将背景设置为大div的相同图像。图像匹配完美。现在你想稍微移动你的小div（让我们说20px右，20 px下来）。现在图像不匹配 - 为了让事情再次发挥作用，你需要在你移动div本身的相反方向上移动小div的背景图像，因此负坐标：（20px left，20px up = -20px）

Answer 2

你可以在这里使用css3过渡样本和教程它可能有用

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

有选择地揭示背景图像

2 个答案: