我有一张小照片,在画廊里。如果单击它,它应该会以大字体显示在下方。
<a class="lilPic1Link" >
<img src="resources/littleFlyingDoggScreen1.png" alt="Willkommen-Screen" width="52" height="93" id="lilPic1" onClick="makePicBig('resources/flyingDoggScreen1.PNG')">
</a>
以下:大图:
<img id="bigPic" alt="game-picture" width="1" height="1" >
那个的 Javascript 函数:
function onLoadFunction() {
document.getElementById("bigPic").style.visibility = "hidden";
}
function makePicBig(sourceString) {
document.getElementById("bigPic").style.visibility = "visible";
document.getElementById("bigPic").src = sourceString;
}
第一个函数使图片在开始时不可见,第二个函数将 bigPic 的源设置为所需的 sourche。
现在我不希望图片直接出现,但希望它从 1px * 1px 平滑到 320px * 586px。 在 CSS 中,我会像这样进行过渡:
#bigPic{
transition: width 3s, height 3s;
}
#bigPic:hover{
width: 320px;
height: 586px;
}
但我不想再次将鼠标悬停在图片上。如果你点击那个小的,bigPic 应该像我说的那样平滑。有什么办法吗? 三张照片是小的。 bigPic 应该出现在它们下面。
最佳答案
使用 JQUERY
function makePicBig(sourceString){
document.getElementById("bigPic").style.visibility = "visible";
document.getElementById("bigPic").src = sourceString;
$("#bigPic").animate({width:320, height: 586}, 3000);
}
CSS
#bigPic{
width: 0;
height: 0;
}
关于javascript - CSS/Javascript 图片转场,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34121146/