Question

我想要的图像最初是黑白的，但是当我将鼠标悬停在它上面时，它会淡入彩色图像。

我发现如何使用jQuery，但我对原型并不是很好，我无法弄清楚如何转换代码以使用Prototype库。有人可以帮帮我吗？

这是jQuery函数：

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

这是CSS：

<style>
div.fadehover { position: relative; }
img.a { position: absolute; left: 0; top: 0; z-index: 10; }
img.b { position: absolute; left: 0; top: 0; }
</style>

以下是正文代码：

<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>

感谢您抽出宝贵时间帮助一个家伙！：d

Answer 1

试试这个：

document.observe( 'dom:loaded', function()
{
    $$( 'img.a' ).first().observe( 'mouseover', function() { new Effect.Opacity( this, { duration: 1.5, from: 1, to: 0, queue: 'end' } ); } )
        .observe( 'mouseout', function() { new Effect.Opacity( this, { duration: 1.5, from: 0, to: 1, queue: 'end' } ); } );
} );

注意事项：

Prototype中的效果或动画是通过名为Scriptaculous

的附加库完成的

一旦DOM准备好，document.observe就会执行代码。

通过持续时间属性处理每个效果运行多长时间的参数。

效果被添加到全局队列的末尾，因此如果有人将鼠标移过然后快速移除，则会发生淡入淡出的颜色，然后它会淡化为黑白色。需要额外的代码才能使淡入淡出淡出并从那里淡化为黑色。

原型在鼠标悬停时淡化黑白色

1 个答案: