简单的javascript交换和淡入/淡出 [英] Simple javascript swap and fade in/out
问题描述
我正在寻找一个javascript解决方案来让我的SWAP操作淡入淡出而不仅仅是出现。
I am looking for a javascript solution to simply make my SWAP action fade in and out rather than just appearing.
我想严格坚持一些javascript而不是使用jquery或任何插件。
Id like to strictly stick to some javascript instead of using jquery or any plugins.
继承用户点击后交换图像的代码，只是寻找一种让它们淡入淡出的方法：
Heres the code that swaps the images on user click, just looking for a way to make them fade in and out:
<script type="text/javascript">
// Image Swap //
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
<body>
<img id="main" src="image1.png" width="250">
<br>
<a href="image1.png" onclick="swap(this); return false;"><img width="50" src="/image1.png"></a>
<a href="image2.png" onclick="swap(this); return false;"><img width="50" src="image2.png"></a>f
<a href="image3.png" onclick="swap(this); return false;"><img width="50" src="image3.png"></a>
</body>
编辑：
我已经看过并尝试了许多不同的javascript选项，但我无法弄清楚如何将它与我上面使用的当前javascript放在一起。包括：
I have seen and tried many different javascript options, but I cannot figure out how to put it together with the current javascript I am using above. Including:
document.write("<style type='text/css'>#main {visibility:hidden;}</style>");
function initImage() {
imageId = 'main';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
推荐答案
你可以使用CSS过渡/动画为你做很多繁重的工作。下面的代码段适用于Chrome和Firefox 4.0测试版。在IE上，没有褪色。有一天它只适用于IE。
You could use CSS transition/animations to do a lot of the heavy lifting for you. The code snippet below works on Chrome and Firefox 4.0 beta. On IE, there's no fade. One day it will just work on IE.
在下面的示例中，我主持两个绝对位于同一div中的图像。对于子图像，我指定不透明度变化的1秒淡入淡出。交换函数只是在图像上设置不可见的src，并为每个图像切换0到1.0之间的不透明度。一个淡出id在另一个淡出的顶部。
In the sample below, I host two images absolutely positioned within the same div. For the child images, I specify a 1 second fade on opacity changes. The swap function just sets the src on the image that isn't visible and toggles the opacity between 0 and 1.0 for each image. One fades id on top of the other fading out.
现在，当你尝试这个时，你可能会注意到第一个交换不能可靠地淡出。那是因为在更改不透明度之前，我没有等待图像上的onload事件发生。最好将不透明度保持为0.0，然后设置src属性。然后在onload回调中，切换不透明度。
Now, when you try this, you may notice the first swap doesn't reliably fade. That's because I didn't wait for the "onload" event on the image to occur before changing opacity. Better to keep opacity at 0.0, then set the src attribute. Then on the onload callback, toggle the opacity.
<head>
<style>
div#imghost
{
position:relative;
height: 100px;
width: 100px;
}
div#imghost img
{
position: absolute;
left: 0px;
top: 0px;
opacity: 0.0;
-moz-transition-property: opacity;
-moz-transition-duration: 1s;
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
transition-property: opacity;
transition-duration: 1s;
}
</style>
<script type="text/javascript">
// Image Swap //
var img1_is_visible = false;
function swap(img) {
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var imgold= img1_is_visible ? img1 : img2;
var imgnew= img1_is_visible ? img2 : img1;
imgnew.style.opacity = 1.0;
imgnew.src = img.src;
imgold.style.opacity = 0.0;
img1_is_visible = !img1_is_visible
}
</script>
</head>
<body>
<div class="imghost">
<img id="img1" />
<img id="img2" />
</div>
<br/>
<img width="50" src="image1.png" onclick="swap('this');">
<img width="50" src="image2.png" onclick="swap('this');">
<img width="50" src="image3.png" onclick="swap('this');">
</body>
这篇关于简单的javascript交换和淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
