脱节的滚动淡入问题与图像有关

Question

I am working on a page layout where a text link at the bottom of the page will control a fadein rollover effect in a separate DIV. 我正在使用页面布局，其中页面底部的文本链接将在单独的DIV中控制淡入过渡效果。 The code I currently have allows me to fade in text (within the DIV area) when I rollover the text link at the bottom of the page. 当我将鼠标悬停在页面底部的文本链接上时，当前拥有的代码可使我在DIV区域内淡入文本。 This Disjointed Rollover effect is perfect for the page I am designing - it has a nice fade in and fade out. 这种脱节过渡效果非常适合我正在设计的页面-它具有很好的淡入淡出效果。 However I would like to fade in a PNG image within the DIV area instead of text, and the existing scripting doesn't seem to allow me to do this. 但是，我希望淡入淡出DIV区域中的PNG图像而不是文本，并且现有的脚本似乎不允许我这样做。 When I try to replace the text with an image, the rollover effect doesn't work anymore. 当我尝试用图像替换文本时，翻转效果不再起作用。 Is there a way to easily modify the existing code to achieve this? 有没有一种方法可以轻松地修改现有代码来实现这一目标？ Any help would be greatly appreciated and thanks in advance for your assistance! 任何帮助将不胜感激，并在此先感谢您的协助！

The current HTML page I have is below: 我当前拥有的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

Gotta recommend jQuery here. 必须在这里推荐jQuery。 Look how much simpler your javascript is! 看看您的javascript简单得多！ And jQuery handles cross browser opacity for you. 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 个解决方案

解决方案1
1 已采纳 2012-07-09 07:52:44

脱节的滚动淡入问题与图像有关

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-07-09 07:52:44

解决方案1
1 已采纳 2012-07-09 07:52:44