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

发布于 2024-10-16 04:48:33 字数 1780 浏览 2 评论 0原文

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

我想严格遵守一些 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()}

原文

I am looking for a javascript solution to simply make my SWAP action fade in and out rather than just appearing.

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>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

以可爱出名 2024-10-23 04:48:33

快速而肮脏：

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）而不是这个。

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

The quick and dirty:

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

}

This should work in all recent browser. You can adjust quality/speed with the 'inc' and 'timeout' variables. Please note that it's better to use a simple animation framework (it doesn't have to be the heavy jQuery) instead of this, if you want to use many animations on your website.

My example may result in performance issues, if used too often/parallel on one website. You might also want to outsource my 'fadein' and 'fadeout' snippets to its own functions, if you want to use it more than once (don't be a copy&paste programmer). :)

回复收藏 0 原文

心欲静而疯不止 2024-10-23 04:48:33

您可以使用 CSS 过渡/动画来为您完成许多繁重的工作。下面的代码片段适用于 Chrome 和 Firefox 4.0 beta。在 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>

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.

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.

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>

回复收藏 0 原文

~没有更多了~