1

我正在尝试创建一个有球的交互式页面。当我点击它时，页面上会出现 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++;
    }
});
4

2 回答 2

2

您可以使用CSSbackground-clip和. 您新创建的 div 应该比带有一些边界半径的“ball.png”大，因此它们显示为圆形。background-positionborder-radius

然后您可以将背景位置设置为等于负 div 的位置：
如果 div 处于打开状态，left: 100px; top: 40px则background-position应该是：-100px -40px

此处的工作示例：http: //jsfiddle.net/bndcS/

编辑

请在此处查看小提琴：http: //jsfiddle.net/UX3B6/ “球”出现效果和延迟。
只需要添加一行 CSS :-)

编辑 2

至于背景和它的负坐标：想象你有一个大div的背景中有一个漂亮的图像。现在你在大的上面创建一个小div的。您将其设置在左上角 (0,0) 并将背景设置为与大 div 相同的图像。图像完美匹配。现在你想移动你的小 div 一点点（假设 20px 向右，20 px 向下）。现在图像不匹配 - 为了使事情再次正常工作，您需要将小 div 的背景图像沿您移动 div 本身的相反方向移动，因此负坐标：（左 20px，上 20px = -20px）

于 2012-09-25T12:36:20.690 回答
0

您可以在此处使用 css3 转换是示例和教程，它可能有用

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

于 2012-09-25T12:05:39.517 回答