我有一些图片,我想通过单击 HTML 中的按钮来浏览它们。我需要在用户单击时产生效果 - 我不想重新加载我的页面。是否有任何 Javascript 或 CSS 可以提供帮助? 我的意思是按下“下一步”按钮,下一个图像可以轻轻地淡入屏幕。
最佳答案
如果您有这样的 div
:
<div id="yourDivId" >
<img id="image_1_Id" class="" src="image_1.png" />
<img id="image_2_Id" class="transparent" src="image_2.png" />
</div>
将此代码插入到您的 css 文件中:
#yourDivId img.transparent
{
opacity:0;
}
#yourDivId img
{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
并将此脚本添加到您的 javascript 文件或 html head 脚本中:
function btnClicked(){
document.getElementById("image_1_Id").className += "transparent";
document.getElementById("image_2_Id").className = "";
}
查看此站点 http://css3.bradshawenterprises.com/cfimg/更多示例!
关于javascript - 通过在 HTML 中淡入淡出来浏览图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11522762/