专家;
我有一个照片修饰作品集页面,其中缩略图替换了主查看器图像。主查看器图像是一个具有前后部分的 Sprite ,显示了修饰前和修饰后的原始图像。 Sprite 作为背景图像加载到主查看器 div 中,设置为在鼠标悬停时重新定位以显示 Sprite 的前后部分。
当页面最初加载时,主查看器会正常运行,在悬停时显示前后位置变化。但是一旦通过缩略图选择将新图像加载到查看器中,悬停操作就会停止工作。我已经处理了几个小时,但无法解决问题。
可以在此处看到主查看器 Sprite 的示例: 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;
}
无论如何在快速测试中为我工作。
关于javascript - 伪类悬停在 JavaScript ImageSwap 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11349812/