我正在研究一个项目,需要为一个文本翻转计算一些简单的jquery,它会改变它背后的div中的图像。
请参阅此处的想法 - http://sharifabraham.com/projects/
我希望图像在on:hover
中淡出并在鼠标离开时淡出。导航器上的每个链接都将显示项目的第一个图像。
有意义吗?
这对css来说是否可以实现?
答案 0 :(得分:1)
这只是你可以做的概述。在悬停时,我们会创建一个新的img
,它将保留必要的图像并将其附加到#slider。新的img
需要绝对定位才能显示在上一张图像的顶部(我们需要这个用于淡入淡出)。当鼠标离开链接时,我们只需删除img
。
像这样更改HTML(将相应图像的URL添加到数据属性):
<a class="hoverlink" data-img="../images/flinders_house.jpg" href="...
还有一些jQuery:
var $slider=$('#slider'); //we save the slider
var $defaultimage=$('img', $slider); //and the default image
//mouseenter for the link
$('#projects .hoverlink').hover(function () {
var filename=$(this).attr('data-img'); //we get the filename from data-img
$('<img id="hoverimage" src="'+filename+'" alt="" />')
.appendTo($slider).fadeIn(500); //append and fade in new image (#hoverimage)
$defaultimage.fadeOut(500); //fade out default image
},
//mouseleave for the link
function () {
$('#hoverimage').fadeOut(500, function () { //fade out #hoverimage
$(this).remove(); //when animation is done, remove it
});
$defaultimage.fadeIn(500); //meanwhile fade in original image
});
我们还需要一些CSS更改:
/* #hoverimage needs to appear on top of default image */
#slider { position: relative; }
#hoverimage { position: absolute; top: 0; left: 0; z-index: 100; }
注意:我没有考虑这些相当大的图片的加载时间,我的代码假设它们已经被缓存了。您可以执行一些预加载,也可以仅在加载图像时启动淡入淡出效果(.load()
)。如果我记得很清楚,后者在Opera中是不可靠的。
答案 1 :(得分:0)
Hmz考虑到我理解你想要这个:
<强> HTML 强>
<ul id="nav">
<li><h3><a href="ideas.html">IDEAS</a></h3></li>
<li><h3><a href="projects.html">PROJECTS</a></h3></li>
<li><h3><a href="studio.html">STUDIO</a></h3></li>
</ul>
<强> JS 强>
$("#nav").hover(function(){$('#slider').hide();}, function(){$('#slider').show()});