添加渐变过渡到丹尼尔诺兰的img滚动javascript

Adding a fade transition to Daniel Nolan's img rollover javascript

本文关键字：img 滚动 javascript 渐变 过渡到 丹尼尔 添加      更新时间：2023-09-26

好吧，我已经意识到，有大量的东西关于褪色的图像与javascript，但没有一个做我想要的。

丹尼尔·诺兰的DOES。

他的脚本允许我简单地将class=imgover添加到图像中，结果是一个很好的图像交换。我所要做的就是制作第二个图像，并在文件名的末尾添加_o。这是我见过的最好最简单的方法。我不需要花哨的jQuery过渡，我不想通过添加background图像在我的css中添加额外的标记。我想要的只是图像之间的渐变过渡。

我所见过的所有jQuery图都需要每个图像额外的标记。我的页面上有几个图像需要进行图像交换。大多数在线的tuts都认为你只需要一个需要效果的页面上的图像。

我如何添加一个渐变过渡到丹尼尔诺兰的img翻转javascript?如果可能的话，我很想这样做，但是我似乎不能使它工作。

http://www.dnolan.com/code/js/rollover/

原始代码

你可以用纯CSS3做这样的事情，不使用Javascript…

HTML: 

<div id="container">
    <div id="roll"></div>
    <div id="under"></div>
</div>
CSS: 

#container {
    position:relative;
    width:50px; height:20px;
}
#roll {
    background:url('http://www.dnolan.com/code/js/rollover/rollover.gif');
    cursor:pointer;
    opacity:1;
    width:50px; height:20px;
    position:absolute; z-index:2;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#roll:hover {
    opacity:0;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#under {
    background:url('http://www.dnolan.com/code/js/rollover/rollover_o.gif');
    width:50px; height:20px;
    position:absolute; z-index:1;
}

这是最好的方法:

使用javascript/jQuery更好地实现褪色图像交换

与丹尼尔·诺兰的剧本相同，但它有一个淡出，并且是jQuery。

相关文章：