浏览 1936 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-08-10
我用scriptaculous的effect实现了一个图片的渐变效果
<html>
<head>
<style type="text/css">
img{
position:absolute;
top:0px;
left:0px;
width:400px;
heigth:400px;
}
ul{
position:absolute ;
top:300px;
left : 250px;
text-decoration : none ;
font : 20px 新宋体;
}
ul li{
float : left;
padding : 0px 5px 0px 5px;
}
</style>
<script src='prototype.js'></script>
<script src='effects.js'></script>
<script language="javascript" type="text/javascript">
function change(num){
$$('#div1 img')
.each(function(img){
if(img.visible()&&img.id!='img'+num){
Effect.Fade(img)
Effect.Appear('img'+num)
}
})
}
//var index = 2;
// Event.observe(window,'load',function(){
// setInterval(function(){
// change(index++);
// if(index>4)index =1 ;
// },3000);
// })
</script>
<title></title>
</head>
<body>
<div id='div1' >
<img src='1.jpg' id='img1' />
<img src='2.jpg' id='img2' style='display:none'/>
<img src='3.jpg' id='img3' style='display:none'/>
<img src='4.jpg' id='img4' style='display:none'/>
</div>
<ul>
<li><a href'#' onmouseover='change("1")'>1</a></li>
<li><a href'#' onmouseover='change("2")'>2</a></li>
<li><a href'#' onmouseover='change("3")'>3</a></li>
<li><a href'#' onmouseover='change("4")'>4</a></li>
</ul>
</body>
</html>
虽然可以实现渐变的效果，但我发现当我不断的在1234之间切换的时候，也就切换个2轮把，会出现图像变成白板，无论我怎么再选择1234什么图都不出来了， 后来我看了t源码，发现apprear,fade 他们在return 时都返回new Effect.Opacity等于我每出发一次换图，都会new两个新的对象，所以我觉得可能是ie无法在创建新的对象了，有没有释放已经创建的对象， 所以我改动了源码，将effects.js中的
Effect.Fade = function(element) {
element = $(element);
var oldOpacity = element.getInlineOpacity();
var options = Object.extend({
from: element.getOpacity() || 1.0,
to: 0.0,
afterFinishInternal: function(effect) {
if(effect.options.to!=0) return;
effect.element.hide().setStyle({opacity: oldOpacity});
}}, arguments[1] || {});
//以下是改动后的，原来是直接return new Effect.Opacity(element,options);
if(typeof fade == 'undefined') fade = new Effect.Opacity(element,options);
else
fade.initialize(element,options);
return fade;
}
Effect.Appear = function(element) {
element = $(element);
var options = Object.extend({
from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
to: 1.0,
// force Safari to render floated elements properly
afterFinishInternal: function(effect) {
effect.element.forceRerendering();
},
beforeSetup: function(effect) {
effect.element.setOpacity(effect.options.from).show();
}}, arguments[1] || {});
if(typeof appear == 'undefined') appear = new Effect.Opacity(element,options);
else
appear.initialize(element,options);
return appear;
}
改动后在试，无论我变换多少次多 不会在出现不显示的现象了，但我不知道是不是new的对象太多造成的，希望大家讨论，给些意见 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
