鼠标悬停时淡入图像 - 全屏 - jQuery
Posted
技术标签:
【中文标题】鼠标悬停时淡入图像 - 全屏 - jQuery【英文标题】：Fade in img on mouseover - Fullscreenr - jQuery 【发布时间】：2012-08-31 20:15:48 【问题描述】：我希望在主导航中的每个锚点鼠标悬停时淡入 img (#bgimg)。我想为每个锚点使用不同的 img。我正在使用插件 Fullscreenr，并且有四个不同的 img，每个都与我的主导航中的链接相关。在 mouseout 上，我希望它回到原来的 img。我只想在我的主页上执行此操作。下面是一个指向我想使用它的页面的链接以及我的标记的片段：
http://tamedia.ca/marlowe/home.html
<body>
<img id="bgimg" src="img/bg-home.jpg" />
<div id="container">
<header>
<nav>
<ul>
<li><a href="brand.html">BRAND</a></li>
<li><a href="collection-aw12.html">COLLECTION</a></li>
<li><a href="boutiques.html">BOUTIQUES</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</header>
</div>
</body>
【问题讨论】：
您在哪一部分遇到了问题？ 我不太确定从哪里开始。我对 jQuery 的了解非常薄弱，希望有人可以为我提供脚本来实现它。任何帮助将不胜感激。 【参考方案1】：好吧，我无法为您提供解决问题的脚本，因为您必须做功课，但这里有一些您可以做的事情的简单介绍。首先将类或 ID 添加到列表项中。像这样的：
<li><a href="brand.html" id="brand">BRAND</a></li>
而且，也许在底部，在 body 标签之前，或者你有你的 javascript 的任何地方，你都可以添加这样的东西：
<script>
$(document).ready(function()
//selects the element with the id of brand on mousein
$('#brand').hover(
function()
//replaces the image on the element bgimg with one called bg-brand.jpg
$('#bgimg').attr('src', 'img/bg-brand.jpg');
//fades in the image
$('#bgimg').fadeIn("slow");
,
function ()
//returns to its original background image after the mouseout
$('#bgimg').attr('src', 'img/bg-home.jpg');
//fades out the image
$('#bgimg').fadeOut("slow");
);
)(jQuery);
</script>
这个例子只翻转了第一个锚点的背景图像，但如果这样有效，我猜你知道演习。要淡入/淡出图像需要一些额外的编码。
【讨论】：
谢谢，效果很好，但我真的希望图像可以淡入淡出。我将如何添加一个漂亮的淡入淡出？【参考方案2】：这是我最终使用的：
$(function ()
$('#brand-nav').hover(function ()
$('#bgimg').fadeOut('fast', function ()
$('#bgimg').attr( 'src', 'img/bg-brand.jpg' );
$('#bgimg').fadeIn('slow');
);
, function ()
$('#bgimg').fadeOut('fast', function ()
$('#bgimg').attr('src', 'img/bg-home.jpg' );
$('#bgimg').fadeIn('slow');
);
);
);
【讨论】：
以上是关于鼠标悬停时淡入图像 - 全屏 - jQuery的主要内容，如果未能解决你的问题，请参考以下文章