我有两个DIV
元素
在DIV_1
内部,我希望在调用时显示某些图像,在DIV_2
中,我将有许多LINKS
。
当DIV 2
中的每个单独的LINK
都悬停时,我希望链接相关的图像出现在DIV 1
中,然后如果另一个LINK
悬浮,则更改为另一个图片,但当鼠标箭头没有悬停在特定的LINK
上时,也会使其消失。
Javascript
function showIt(imgsrc)
{
document.getElementById('bottle').src=imgsrc;
document.getElementById('bottle').style.display='block';
}
function hideIt()
{
document.getElementById('bottle').style.display='none';
}
在链接中添加以下代码:
<a href="#" onmouseover="showIt('some_image.jpg')" onmouseout="hideIt()" >...</a>
然而,它看起来并不漂亮。考虑使用jQuery。
编辑:
使用jQuery可以这样做:
HTML:
<a href="#" data-src="some.jpg" class="changeImage" >...</a>
<a href="#" data-src="another.jpg" class="changeImage" >...</a>
...
<img class="bottle" />
JavaScript
$(function(){
$('.changeImage').hover(function(){
$('.bottle').attr('src',$(this).attr('data-src'));
$('.bottle').show();
},
function(){
$('.bottle').hide();
});
})
可以通过提供动画时间作为show()和hide()的参数来调整动画速度。放在标签的数据src属性中的图像的URL。
您可能会考虑的另一种选择是在CSS中设置background-image
属性,然后添加:hover
伪类以更改为新图像,这样您就不必处理Javascript了。
使用transition
属性,您甚至可以在两个图像之间添加淡入淡出,而无需额外的工作,也无需包含另一个库(如jQuery)。
下面是一些可以使用的简单jQuery:
$('#DIV1').delegate('a', 'mouseenter mouseleave', function (e) {
if (e.type === "mouseenter") {
switch ($(this).attr('href')) {
case "#link1":
$('#DIV2').html('<img src="image1.jpg" />');
break;
case "#link2":
$('#DIV2').html('<img src="image2.jpg" />');
break;
}
} else if (e.type === "mouseleave") {
$('#DIV2 img').fadeOut();
}
});
jsBin演示
如果你有这样的东西:
<div id="images">
<img src="img1.jpg" alt="" />
<img src="img2.jpg" alt="" />
<img src="img3.jpg" alt="" />
</div>
<ul id="links">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
CSS:
#images img{position:absolute;display:none;}
比你只需要这个:
$('#links li').on('mouseenter mouseleave',function(e){
$('#images img').stop().fadeTo(300,0); // do on mouseenter and mouseleave
if(e.type=='mouseenter'){ // do just on mouseenter
$('#images img').eq( $(this).index() ).stop().fadeTo(300,1);
}
});