By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,598 Members | 1,001 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,598 IT Pros & Developers. It's quick & easy.

background image

P: n/a
I have this little code wich is working quite good, it makes a slide
show on the body background, anyone could guide me on how to add a
fade effect as a transition between the images??

var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;

function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
}
function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j (p-1)){
j=0
}
setTimeout('runBGSlideShow()', 2000);
}

</script>
</head>
<body onload="runBGSlideShow();preLoad()">
Jun 27 '08 #1
Share this Question
Share on Google+
4 Replies

P: n/a
On 4月28日, 上午4时00分, tetris <tetri...@gmail.com>wrote:
I have this little code wich is working quite good, it makes a slide
show on the body background, anyone could guide me on how to add a
fade effect as a transition between the images??

var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;

function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];

}
}

function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j (p-1)){
j=0}

setTimeout('runBGSlideShow()', 2000);

}

</script>
</head>
<body onload="runBGSlideShow();preLoad()">
You can use the JQuery. There are already some method to make
animation in JQuery.
Jun 27 '08 #2

P: n/a
On 28 avr, 03:41, None <jdxyw2...@gmail.comwrote:
On 4月28日, 上午4时00分, tetris <tetri...@gmail.comwrote:
I have this little code wich is working quite good, it makes a slide
show on the body background, anyone could guide me on how to add a
fade effect as a transition between the images??
var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;
function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
}
function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j (p-1)){
j=0}
setTimeout('runBGSlideShow()', 2000);
}
</script>
</head>
<body onload="runBGSlideShow();preLoad()">

You can use the JQuery. There are already some method to make
animation in JQuery.
i dont want to use frameworks
Jun 27 '08 #3

P: n/a
On Apr 28, 3:40 pm, tetris <tetri...@gmail.comwrote:
On 28 avr, 03:41, None <jdxyw2...@gmail.comwrote:
On 4月28日, 上午4时00分, tetris <tetri...@gmail.comwrote:
I have this little code wich is working quite good, it makes a slide
show on the body background, anyone could guide me on how to add a
fade effect as a transition between the images??
var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;
function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
}
function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j (p-1)){
j=0}
setTimeout('runBGSlideShow()', 2000);
}
</script>
</head>
<body onload="runBGSlideShow();preLoad()">
You can use the JQuery. There are already some method to make
animation in JQuery.

i dont want to use frameworks
It is normally done using setTimeout or setInterval to step through
various levels of opacity with a pause of say 50ms between steps -
increasing one image while decreasing the other. Search the archives
for "fade opacity".

You might like to look at this post in another group by Peter
Michaux :

<URL: http://groups.google.com/group/forkj...478a40367d215#
>
There was also a thread there on opacity performance - it's a little
old now but likely much of it still applies. It also suggests
strategies for ensuring the fade works well in different browsers and
slower platforms.
--
Rob
Jun 27 '08 #4

P: n/a
On 28 avr, 08:45, RobG <rg...@iinet.net.auwrote:
On Apr 28, 3:40 pm, tetris <tetri...@gmail.comwrote:


On 28 avr, 03:41, None <jdxyw2...@gmail.comwrote:
On 4月28日, 上午4时00分, tetris <tetri...@gmail.comwrote:
I have this little code wich is working quite good, it makes a slide
show on the body background, anyone could guide me on how to add a
fade effect as a transition between the images??
var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;
function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
}
function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j (p-1)){
j=0}
setTimeout('runBGSlideShow()', 2000);
}
</script>
</head>
<body onload="runBGSlideShow();preLoad()">
You can use the JQuery. There are already some method to make
animation in JQuery.
i dont want to use frameworks

It is normally done using setTimeout or setInterval to step through
various levels of opacity with a pause of say 50ms between steps -
increasing one image while decreasing the other. Search the archives
for "fade opacity".

You might like to look at this post in another group by Peter
Michaux :

<URL:http://groups.google.com/group/forkj...m/thread/05d47....

There was also a thread there on opacity performance - it's a little
old now but likely much of it still applies. It also suggests
strategies for ensuring the fade works well in different browsers and
slower platforms.

--
Rob- Masquer le texte des messages précédents -

- Afficher le texte des messages précédents -
thanks for your reply, i have found the effect but they are generally
implemented over a div on the document, i've been trying to tweak it
to get to the body.background of the document, will keep on trying..
Jun 27 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.