我有一张图片:
Clown%20Fish
在鼠标悬停时我必须显示另一张图片:
image.jpeg
图片上方:
energy.jpeg
(显示 webkit-transition: opacity 1s ease-in-out 属性)
我在这里得到了第一个代码形式:http://css3.bradshawenterprises.com/cfimg/#comments
剂量不起作用......
这是现场演示:http://liveweave.com/6EgbYH
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
#cfnormal {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf {
position:relative;
height:10px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
width:450px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function change(x)
{
var element = document.getElementById('imgtop');
element.style.opacity = "0";
}
</script>
</head>
<body>
<div id="cf">
<img id="imgbott" class="bottom" src="./image.jpeg" />
<img id="imgtop" class="top" src="./energy.jpeg" />
</div>
<div id="cfnormal">
<img onmouseover="change(this)" src="./Clown%20Fish.jpg" />
</div>
</body>
</html>
最佳答案
当第三张图片在鼠标悬停时触发事件时，我必须显示一张图片在另一张图片上
正确代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
#cfnormal {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cfnormal img {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf {
position:relative;
height:10px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
width:450px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function change(x)
{
var element = document.getElementById('imgtop');
element.style.opacity = "0";
}
function normalImg(x)
{
var element = document.getElementById('imgtop');
element.style.opacity = "1";
}
</script>
</head>
<body>
<div id="cf">
<img id="imgbott" class="bottom" src="http://youngsskatingcenter.com/nss- folder/pictures/Many_colors.gif" />
<img id="imgtop" class="top" src="http://freepages.genealogy.rootsweb.ancestry.com/~genphotos2/jwline.jpg" />
</div>
<div id="cfnormal">
<img onmouseover="change(this)" onmouseout="normalImg(this)" src="http://www.vmapas.com/maps/2748-2/Immagine_Satellitare_Mondo_Occidentale.jpg" />
</div>
</body>
</html>
关于jquery - 交叉淡入淡出图像javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16512528/