脱节的滚动淡入问题与图像有关
[英]Disjointed Rollover fade in issue with image
问题描述
我正在使用页面布局，其中页面底部的文本链接将在单独的DIV中控制淡入过渡效果。 当我将鼠标悬停在页面底部的文本链接上时，当前拥有的代码可使我在DIV区域内淡入文本。 这种脱节过渡效果非常适合我正在设计的页面-它具有很好的淡入淡出效果。 但是，我希望淡入淡出DIV区域中的PNG图像而不是文本，并且现有的脚本似乎不允许我这样做。 当我尝试用图像替换文本时，翻转效果不再起作用。 有没有一种方法可以轻松地修改现有代码来实现这一目标？ 任何帮助将不胜感激，并在此先感谢您的协助！
我当前拥有的HTML页面如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var c=0;
var obj;
var speed=20;
window.onload=function() {
obj=document.getElementById('fader');
var l=document.getElementById('mylink');
l.onmouseover=function() {
fadeinOut('in');
}
l.onmouseout=function() {
fadeinOut('out');
}
}
function fadeinOut(dir){
if(obj.filters) {
obj.style.filter='alpha(opacity='+c+')';
}
else {
obj.style.opacity=c/100;
}
if(dir=='in') {
dir1='in'
c++;
}
else {
dir1='out';
c--;
}
if(c>100){
c=100;
return;
}
if(c<0){
c=0;
return;
}
setTimeout('fadeinOut(dir1)',speed)
}
</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
width:324px;
height:200px;
border:3px double #000;
margin:auto;
}
#fader {
height:176px;
padding:12px;
filter:alpha(opacity=0);
opacity:0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:14px;
text-align:justify;
}
</style>
</head>
<body>
<div id="container">
<div id="fader">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit,
</div>
<a href="#" id="mylink">My Link Will Go Here</a>
</div>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2012-07-09 07:52:44
必须在这里推荐jQuery。 看看您的javascript简单得多！ jQuery为您处理跨浏览器的不透明性。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( function(){
$('#mylink').mouseenter( function(){
$('#fader').stop().animate({opacity:1});
}).mouseleave( function(){
$('#fader').stop().animate({opacity:0});
})
});
</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
border:3px double #000;
margin:auto;
}
#fader {
padding:12px;
filter:alpha(opacity=0);
opacity:0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:14px;
text-align:justify;
}
</style>
</head>
<body>
<div id="container">
<div id="fader">
<img src='http://4.bp.blogspot.com/--owXoE04D_k/T-3epqrKyLI/AAAAAAAAANA/HLRMp2I9T4U/s1600/facebook-smiley-face.jpg'/>
</div>
<a href="#" id="mylink">My Link Will Go Here</a>
</div>
</body>
</html>
非常简单的脱节过渡图像交换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.