Question

我正在尝试制作一个电影预览div，当用户沿着div的宽度移动时会更改，就像braziers.com电影预览系统一样。

我有这个代码并且它正在运行，但我不知道这是否是最好和最简单的方法。

以下是代码示例：

http://lamarungawings.com/test/thumbnail.html

以下是代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Thumb Roll over</title>
<script>


           function getStyle(el, cssprop)
           {
                if (el.currentStyle) //IE
                    return el.currentStyle[cssprop]
                else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
                    return document.defaultView.getComputedStyle(el, "")[cssprop]
                else //try and get inline style
                    return el.style[cssprop]
            }

            function changeColor(el)
            {
                var bcolor= getStyle(el, 'backgroundImage')
                    //alert(bcolor);
                document.getElementById("chosenColor").style.backgroundImage = bcolor;

            }
 </script>
 <style type="text/css">

.largeImg {
    width:286px;
    height:166px;
    float:left;
}
.smallImg {
  width:54px;
  height:166px;
  float:left;
  margin:0 0 0 3px;
}

#chosenColor {
background-image:url(img/th_main.jpg);
width:288px;
height:166px;
}

#c1 { background-image:url(img/th_one.jpg); }
#c2 { background-image:url(img/th_two.jpg); }
#c3 { background-image:url(img/th_three.jpg); }
#c4 { background-image:url(img/th_four.jpg); }
#c5 { background-image:url(img/th_five.jpg); }
 </style>

</head>
<body>


<div class="largeImg" id="chosenColor">
    <div id="c1" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div>
    <div id="c2" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div>
    <div id="c3" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div>
    <div id="c4" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div>
    <div id="c5" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div>   
</div>

<p>ROLLOVER THE IMAGE</p>

</body>
</html>

谢谢。

Answer 1

您还可以将图像命名为与小div的ID匹配，从而无需CSS背景属性。

<div id="c2"></div>

var bcolor= el.id;
document.getElementById("chosenColor").style.backgroundImage = '/img' + bcolor + ".jpg";

鼠标悬停在DIV宽度上时显示不同的缩略图背景

1 个答案: