Question

我正在进行页面布局，页面底部的文本链接将控制单独DIV中的fadein翻转效果。当我翻转页面底部的文本链接时，我当前的代码允许我淡入文本（在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>

Answer 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>

脱节的翻转在图像问题上淡出

1 个答案: