简单的JavaScript交换和淡入/淡出

我正在寻找一个JavaScript解决方案，以简单地使我的SWAP操作淡入淡出而不仅仅是出现。简单的JavaScript交换和淡入/淡出

Id喜欢严格坚持一些JavaScript而不是使用jQuery或任何插件。

继承人在用户点击交换图像的代码，只是在寻找一种方法，使他们淡入和淡出：

<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一起。包括：

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()}

来源

2011-02-05 JB.

你可以使用CSS过渡/动画来为你做很多繁重的工作。下面的代码片段适用于Chrome和Firefox 4.0测试版。在IE上，不会有任何褪色。有一天它只会在IE上运行。

在下面的示例中，我托管了绝对位于同一个div内的两个图像。对于儿童图像，我指定了不透明度更改的1秒淡出。交换功能只是将图像上的src设置为不可见，并为每个图像切换介于0和1.0之间的不透明度。一个淡出的ID在其他淡出之上。

现在，当您尝试此操作时，您可能会注意到第一个交换不能可靠地消失。这是因为在更改不透明度之前，我没有等待图像上的“onload”事件发生。最好保持不透明度为0.0，然后设置src属性。然后在onload回调中，切换不透明度。

<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>

来源

2011-02-05 22:53:09 selbie

的快速和肮脏的：

function swap (image) { 

    var inc = 0.1; // Increment/Decrement 
    var timeout = 100; 

    var fadeout = window.setInterval (function() { 
     var e = document.getElementById("main"); 
     var o = parseFloat(e.style.opacity); 
     if (o <= 0) 
      window.clearInterval (fadeout); 
     else 
      o = o - inc; 
     e.style.opacity = o; 
    }, timeout); 

    document.getElementById("main").src = image.href; 

    var fadein = window.setInterval (function() { 
     var e = document.getElementById("main"); 
     var o = parseFloat(e.style.opacity); 
     if (o >= 1) 
      window.clearInterval (fadein); 
     else 
      o = o + inc; 
     e.style.opacity = o; 
    }, timeout); 

}

这应该在最近所有的浏览器。您可以使用'inc'和'timeout'变量调整质量/速度。请注意，如果你想在你的网站上使用许多动画，最好使用一个简单的动画框架（它不一定是沉重的jQuery）而不是这个。

我的示例可能会导致性能问题，如果在一个网站上使用太频繁/并行。如果您想多次使用它（不要复制&粘贴程序员），您可能还想将我的“淡入淡出”和“淡出”片段外包给自己的功能。 :)

来源

2011-02-05 21:23:28 anroesti

简单的JavaScript交换和淡入/淡出

回答

相关问题