Question

我最近刚开始使用html，并想知道如何实现以下代码并提高效率并使用arrayList。

dotenv

截至目前，当图像id等于pop0，然后另一个等于pop1。它们都将动画到第一个图像的高度和宽度。我如何使用数组，以便每个img都有自己的位置，并且不会基于加载的第一个图像而是基于它们自己的顶部和左侧坐标？

Answer 1

如评论中所述，您需要将position变量从悬停事件处理程序外部移动到悬停事件处理程序内部。这会将上下文设置为当前悬停的项目。

目前，您的p变量存储了一个以pop开头的ID开头的所有元素的数组。然后，您将存储对第一个元素位置的引用，并且永远不会通过在悬停事件处理程序之外设置position的值来进行更新。

这是一个带有一点缓存的示例，因此您并不总是查询DOM。

var $pop = $( '[id^=pop]' );

$pop.hover( function hoverIn() {

    var $this = $( this ),
        pos   = $this.position();

    $this
        .css( 'cursor', 'pointer' ) // <= Possibly do this via CSS.
        .animate( {
            width: '400px',
            height: '400px',
            top: pos.top * 0.7,
            left: pos.left * 0.7
        }, 150 );

}, function hoverOut() {

    var $this = $( this ),
        pos   = $this.position();

    $this.animate( {
        width: '300px',
        height: '300px',
        top: pos.top,
        left: pos.left
    }, 150 );

} );

如何为此html代码实现数组列表？

1 个答案: