1

专家；

我有一个照片修饰投资组合页面，其中包含替换主查看器图像的缩略图。主查看器图像是具有“之前”和“之后”部分的精灵，显示修饰之前和修饰后的原始图像。精灵作为背景图像加载到主查看器 div 中，设置为在鼠标悬停时重新定位以显示精灵的“之前”和“之后”部分。

当页面最初加载时，主查看器的行为应如此，在悬停时显示之前和之后的位置偏移。但是，一旦通过缩略图选择将新图像加载到查看器中，悬停动作就会停止工作。我已经用了几个小时了，但无法解决问题。

可以在此处看到主查看器精灵的示例： http ://www.triadimedia.com/frame_01.jpg 。所有样式和脚本都包含在页面中，位于： http ://www.triadimedia.com/pfolio_photo_retouch.php 。

任何帮助将不胜感激。

谢谢。

凯西

4

1 回答 1

0

更改您的拇指以使用此代码：

<a onclick="javascript:thumb_swap(1);"></a>
<a onclick="javascript:thumb_swap(2);"></a>

ETC...

然后用这个替换所有当前的 JS 函数：

function thumb_swap(num) {
    if(num<10) num = "0"+num;
    var el = document.getElementById('viewer');
    var styles = getComputedStyle(el,null);
    var bgurl = styles.backgroundImage;
    bgurl = bgurl.replace(/_[0-9]+\.jpg/,'_'+num+'.jpg');
    document.getElementById('viewer').style.backgroundImage = bgurl;
}

无论如何，在快速测试中为我工作。

于 2012-07-05T18:12:38.550 回答