Question

我需要一个脚本，它将应用于一个圆圈周围的一组图像..

现在通过脚本需要的是

鼠标悬停在圆圈周围的图像应该放大并移动到中心。

如何使用Javascript和CSS执行此操作。

请具体说明CSS的属性和Javascript的功能，我几乎是新手。

帮帮我。

Thnx提前。

Answer 1

您应该将问题分解为较小的部分，然后在实施任何问题时提出问题。建议的分手是：

i]定位图像：嗯，对于给定的一组图像，您需要首先定义圆的参数，一般是它的大小。它纯粹是一个功能。您拥有的图像和预览的大小。完成后，您可以使用简单的极坐标进行定位。

ii]动画部分：最好用jQuery或script.aculo.us处理。尝试使用自己的函数以获得更好的性能[JS框架可能会变得非常慢]。

iii]调整：好吧，试着四处游戏并获得结果。

Answer 2

将此脚本功能添加到页面：

function actionWhenMouseOver(imgName) {
    var img = document.getElementById(imgName);
    img.style['width'] = "500px";
    img.style['height'] = "500px";
}

然后是关于onmouseout的类似事件：

function actionWhenMouseOut(imgName) {
    var img = document.getElementById(imgName);
    img.style['width'] = "200px";
    img.style['height'] = "200px";
}

然后对于您希望发生的每个图像添加属性：

<image id="image1" src="" onmouseover="actionWhenMouseOver(this.id)" onmouseout="actionWhenMouseOut(this.id)"/>

图像放大onmouseover

2 个答案: