Javascript marquee hover and zoom effect implement code _ special text effects

Friends who have used QQ space should be familiar with this. The results are amazing, but they are implemented in flash, so javascript is not acceptable, anyone who needs to know about QQ space should be familiar with this. The effect is pretty good, but they are implemented in flash. Can javascript be used, after three days of thinking, I finally finished the process. However, some areas are still not perfect. I hope you will understand it more. I will make it perfect in the future.

Let's start with the following ideas::
First, dynamically create an html Structure

The Code is as follows:

.............

This is critical, and then set a timer to simulate the movement of img, and bind the onmouseenter and onmouseleave events of the outer p. Finally, return the outer p object.

See the code below

The Code is as follows:

Sx. activex. dynamicpic = {
Init: function (imga, border, margin, w, h, step, speed ){
Var demo = document. createElement ("p ");
Var tbody = document. createElement ("tbody ");
Var demo1 = document. createElement ("td ");
Var demo2 = document. createElement ("td ");
Var table = document. createElement ("

C [I]. style. marginLeft = margin + "px ";
C [I]. style. border = border;
}
Demo2.innerHTML = demo1.innerHTML
Function Marquee (){
If (demo2.offsetWidth-demo. scrollLeft <= 0 ){
// Alert (demo. scrollLeft );
Demo. scrollLeft-= demo1.offsetWidth ;}
Else {
Demo. scrollLeft + = step;
}
}
Var MyMar = setInterval (Marquee, speed );
Demo. onmouseenter = function (){
ClearInterval (MyMar );
Var t = document. elementFromPoint (window. event. clientX, window. event. clientY );
If (t. tagName! = "IMG ")
Return;
If (t. offsetHeight> demo. offsetHeight + 10)
Return;
// Alert (t. src );
Var d = document. createElement ("img ");
D. style. height = t. offsetHeight + 50 + "px ";
D. style. width = t. offsetWidth + 50 + "px ";
D. style. position = "absolute ";
D. style. top = "-25px ";
If (t. parentNode = demo2 ){
D. style. left = t. offsetLeft + demo1.offsetWidth-20 + "px ";
// Alert (1 );
// Demo. scrollLeft-= demo1.offsetWidth;
} Else {
D. style. left = t. offsetLeft-25 + "px ";}
// Alert (d. style. left );
// Alert (window. event. clientX );
// Alert (t. offsetLeft-demo.scrollLeft + demo. offsetWidth-25 );
D. src = t. src;
D. onmouseleave = function (){
D. parentNode. removeChild (d );
MyMar = setInterval (Marquee, speed)
}
// Alert (1 );
// Demo. style. overflow = "visible ";
Demo1.appendChild (d );
// Alert (m. innerHTML );
}
Demo. onmouseleave = function () {MyMar = setInterval (Marquee, speed )}
Return demo;
}
}

The imga of the function parameter is the array of the img address you want to input, border is the border attribute of the image, margin is the distance between the images, w is the width of the outer p, h is the same, step is the number of steps for the timer to move an image, and speed is the timer interval.
The timer code above borrowed some code from the Internet, but I made some improvements myself.
The call code is as follows:

The Code is as follows:

Untitled Document

");Var tr = document. createElement ("tr ");Demo. style. position = "absolute ";Demo. style. height = h + "px ";Demo. style. width = w + "px ";Demo. style. overflowX = "hidden ";For (var I = 0; ivar img = document. createElement ("img ")Img. src = imga [I];Img. style. height = h + "px ";Img. style. width = parseInt (w/imga. length) + "px ";Demo1.appendChild (img)}Tr. appendChild (demo1 );Tr. appendChild (demo2 );Tbody. appendChild (tr );Table. appendChild (tbody );Demo. appendChild (table );Var c = demo1.all;For (var I = 0; I