Question

我正在尝试制作类似于anntaylor site

中的图片库

我可以通过更改图像源来更改鼠标悬停时的主图像。这是我申请的代码。

 <div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
 <div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
 <div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
 <div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
 <div id="viewpoint"><img src="p1.png" name="mainimage" alt=""  /></div>

上述代码的CSS是：

#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}

问题在于改变图像我无法获得褪色效果。请提供合适的JavaScript代码以获得淡化效果。

Answer 1

jQuery fadeIn - http://api.jquery.com/fadeIn/

Answer 2

使用fadeIn（http://api.jquery.com/fadeIn/）和fadeOut方法（http://api.jquery.com/fadeOut/）的jQuery应该适合你

Answer 3

不打算详细介绍......但做了类似的项目，这就是我处理它的方式......

<div id="slides">
    ...
    <img src="..." class="trans prev" data-id="image1" />
    <img src="..." class="trans shown current" data-id="image2" />
    <img src="..." class="trans next" data-id="image3" />
    ...
</div>

然后在CSS中，我使用CSS3过渡，其中.trans类的不透明度为0，z-index为100，其中.trans.shown设置为不透明度1，z-index为200。

Javascript用于提取当前图像，删除“显示”类，并根据需要更新类... .prev和.next分别将左侧位置设置为-100％和100％。

我也只维护堆栈中的当前，上一页和下一页图像..其他图像从DOM中删除...这使得事物保持相当轻/快。结合用于平板电脑支持的jquery.swipe插件。会显示最终产品的链接，但直到下个月才会显示。

使用javascript淡化效果

3 个答案: