0

我正在处理页面布局，其中页面底部的文本链接将控制单独 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>
4

1 回答 1

1

必须在这里推荐 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>
于 2012-07-09T07:52:44.123 回答