Javascript中的图像淡入和淡出动画(不是JQuery) [英] Image Fade In and Fade Out animation in Javascript (Not JQuery)
本文介绍了Javascript中的图像淡入和淡出动画(不是JQuery)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作一个图像淡入和淡出的图片库.它在大多数情况下都起作用，但它做的是一件奇怪的事情，其中循环永远停留在某个元素上，使它发出奇怪的闪烁.我认为逻辑很好，但是我无法忽略要成功停止的某些事情.
I'm trying to make an Image gallery where the images fade in and out. it works for the most part, but it does this weird thing where the loops linger on an element forever making it do a weird flashing. I feel the logic is fine, but there is something I am overlooking for it to successfully stop.
var d = document;
var images = new Array();
function rotate(id,delay)
{
var obj = d.getElementById(id);
var imageCell = images.length;
images[imageCell] = obj.children;
if(images[imageCell].length < 1)
return 0;
var gs = images[imageCell].length;
var srcs = new Array();
var rng = 0;
var ln = -1;
var curImg;
for(var i = 1; i < gs; i++)
{
images[imageCell][i].style.opacity=0;
}
fadeOut(obj,curImg,imageCell,rng,ln,gs,delay);
}
function fadeOut(obj,curImg,imageCell,rng,ln,gs,delay)
{
setTimeout
(
function()
{
devanimate(images[imageCell][rng],"opacity",250,1,0);
ln = rng;
do
{
rng = Math.floor(Math.random() * gs);
}while(ln == rng);
nextImage(obj,curImg,imageCell,rng,ln,gs,delay);
},
delay
);
}
function nextImage(obj,curImg,imageCell,rng,ln,gs,delay)
{
images[imageCell][rng].style.left= (obj.clientWidth/2 - images[imageCell][rng].clientWidth/2)+"px";
devanimate(images[imageCell][rng],"opacity",250,0,1);
fadeOut(obj,curImg,imageCell,rng,ln,gs,delay);
}
function devanimate(obj,cssStyle,time,a,b)
{
if(typeof obj === 'undefined') return;
var frame = 24;
var second = 1000;
var fps = (second/frame);
var distance = parseInt(b) - parseInt(a);
var rate = ((distance/frame)*second)/time;
setTimeout
(
function()
{
a += rate;
obj.style.opacity=a;
newTime = time-fps;
devanimate(obj,cssStyle,newTime,a,b);
}
,fps
);
if((parseInt(a) >= parseInt(b) && distance >= 0) || (parseInt(a) <= parseInt(b) && distance < 0))
obj.style.opacity=b;
return;
}
我知道了.这是HTML的工作代码.
I figured it out. Here is the working code with HTML.
<div id="fpImage" class="border gallery" style="padding:0px;">
<img src="images/g20.jpg" alt=""/>
<img src="images/g1.jpg" alt=""/>
<img src="images/g2.jpg" alt=""/>
<img src="images/g3.jpg" alt=""/>
<img src="images/g4.jpg" alt=""/>
<img src="images/g5.jpg" alt=""/>
<img src="images/g6.jpg" alt=""/>
<img src="images/g7.jpg" alt=""/>
<img src="images/g8.jpg" alt=""/>
<img src="images/g9.jpg" alt=""/>
<img src="images/g10.jpg" alt=""/>
<img src="images/g11.jpg" alt=""/>
<img src="images/g12.jpg" alt=""/>
<img src="images/g13.jpg" alt=""/>
<img src="images/g14.jpg" alt=""/>
<img src="images/g15.jpg" alt=""/>
<img src="images/g16.jpg" alt=""/>
<img src="images/g18.jpg" alt=""/>
<img src="images/g19.jpg" alt=""/>
<img src="images/g17.jpg" alt=""/>
</div>
<script type="text/javascript">
rotate("fpImage",3000);
</script>
var d = document;
var images = new Array();//Set Array so you can have multiple galleries on a page at a time
function rotate(id,delay)
{
var obj = d.getElementById(id);
var imageCell = images.length;
images[imageCell] = obj.children;//set specific gallery into images array
if(images[imageCell].length < 1)
return 0;
var gs = images[imageCell].length;
var rng = 0;//Initialize rng
var ln = -1;//initialize Last Number. This is used so the rng doesn't bring hte same number twice in a row
setTimeout//This set Timeout centers each image horizontally.
(
function()
{
for(var i = 0; i < gs; i++)
images[imageCell][i].style.left= (obj.clientWidth/2 - images[imageCell][i].clientWidth/2)+"px";
},delay
);
for(var i = 1; i < gs; i++)//this makes all the images initially 100% transparent
{
images[imageCell][i].style.opacity=0;
images[imageCell][i].style.filter='alpha(opacity=0)';
}
nextImage(imageCell,rng,ln,gs,delay);
}
function nextImage(imageCell,rng,ln,gs,delay)
{
setTimeout
(
function()
{
devanimate(images[imageCell][rng],250,100,0);//Fade out current image
ln = rng;//Remember previous RNG Number
do
{
rng = Math.floor(Math.random() * gs);//
}while(ln == rng);//Loop until new RNG Number is found
devanimate(images[imageCell][rng],250,0,100);//Fade in new image
nextImage(imageCell,rng,ln,gs,delay);//call this function again
},
delay
);
}
function devanimate(obj,time,a,b)
{
var frame = 30;//FPS Rate, so this is currently set to 30 fps
var second = 1000;
var fps = (second/frame);
var distance = parseInt(b) - parseInt(a);
var rate = ((distance/frame)*second)/time;
setTimeout
(
function()
{
a += rate;
obj.style.opacity=(a/100);
obj.style.filter='alpha(opacity='+a+')';
newTime = time-fps;
if((parseInt(a) >= parseInt(b) && distance >= 0) || (parseInt(a) <= parseInt(b) && distance < 0))
{
obj.style.opacity=(b/100);
obj.style.filter='alpha(opacity='+b+')';
}
else
devanimate(obj,newTime,a,b);
}
,fps
);
}
推荐答案
您应该能够从下面的链接中获取代码.只需查找swissarmy.js链接:
You should be able to get the code from the link below. Just look for the swissarmy.js link:
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm
脚本正在执行的操作是将IE的较旧版本的filter属性应用于图像.在其他浏览器上，它使用opacity属性.这是了解不透明度的更好链接:
What the script is doing is applying a the filter attribute for older versions of IE to the images. On other browsers its using the opacity attribute. Here is a better link for understanding opacity:
http://www.scriptiny.com/2011/01/javascript-fade-in-out/
这篇关于Javascript中的图像淡入和淡出动画(不是JQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
