In the previous article:I think the text scrolling in the lower left corner of Zhubajie.com has a good effect. I explored it myself and realized it in my own way!
This is the effect, but it has little effect. The impact of Demo is great!
Some people have had such problems on the Internet and read the address of the following post:
A problem with setInterval under firefox 6
There are many people discussing it, but no answer is given.
I can't figure it out no matter how I think about it!
Today, I suddenly realized that it might be the concept of threads, but I still don’t understand the specific reason. I hope someone understands the original one and should tell me. I am very grateful!
The black Div in Demo is not affected by browser tag switching
And the red Div will be affected.
HTML:
<div style="position: absolute; width: 100px; height: 100px; top: 0pt; left: 0pt; background: none repeat scroll 0% 0% #000000; z-index: 999; color: #ffffff;">I am not affected by browser tag switching! Hoooo</div>
<div style="position: absolute; width: 100px; height: 100px; top: 0pt; left: 0pt; background: none repeat scroll 0% 0% red; z-index: 999; color: #ffffff;">I am affected by browser tag switching! 5555</div>
javascript:
(function(){
var elem = ('move'),
elem2 = ('move2'),
pos = (elem),
view = (),
//Gray block motion function
move = function(){
var t1 = (elem,{top:0,left:0},{top:-100,left:-100},3000,function(){
var t2 = (elem,{left:-100},{left:},3000,function(){
var t3 = (elem,{top:-100},{top:},3000,function(){
move();//After confirming that t3 is finished, I will call back the move() function.
});
});
});
};
move();
// Red block motion function
(elem2,{top:0,left:(-100)+'px'});
var move2 = function(){
var t1 = (elem2,{top:0,left:-100},{top:-100,left:},3000,function(){
var t2 = (elem2,{top:-100},{top:},3000,function(){
var t3 = (elem2,{left:0},{left:-100},3000,function(){
});
});
});
};
move2();
setInterval(function(){move2();},9050);
// Red block motion function
})();