伪类悬停在 JavaScript ImageSwap 中不起作用

Pseudo Class Hover won't work in JavaScript ImageSwap

本文关键字：ImageSwap 不起作用 JavaScript 悬停      更新时间：2023-09-26

专家;

我有一个照片修饰作品集页面，其中缩略图图像交换了主查看器图像。主查看器图像是一个具有"之前和之后"部分的精灵，显示修饰之前和修饰后的原始图像。子画面作为背景图像加载到主查看器div 中，设置为在鼠标悬停时重新定位以显示精灵的"之前"和"之后"部分。

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

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

任何帮助将不胜感激。

谢谢。

凯西

更改拇指以使用此代码：

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

等。。。

然后将您当前的所有 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;
}

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

相关文章：