Javascript marquee hover magnification effect implementation code_text special effects

Friends who have used QQ space should be familiar with this. The effects are quite dazzling, but they are implemented in flash, so can javascript be used? I thought about it for three days and finally got it almost done, but there are still some imperfections. , I hope everyone can understand me, I will improve it in the future.

Let me talk about the idea first:
First dynamically create an html structure

Copy code The code is as follows:

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

This is very important, and then set a Use a timer to simulate the movement of the img, and bind the onmouseenter and onmouseleave events of the outer div. Finally, return the outer div object.

Look at the code below

Copy code The code is as follows:

sx.activex.dynamicpic={
init:function(imga,border, margin,w,h,step,speed){
var demo=document.createElement("div");
var tbody=document.createElement("tbody");
var demo1=document.createElement ("td");
var demo2=document.createElement("td");
var table=document.createElement("");
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;ic[i].style.marginLeft=margin "px";
c[i].style.border=border;
}
demo2.innerHTML = demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft//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 you want to pass in the img address, border is the border attribute of the image, and margin is the space between the images distance, w is the width of the outer div, h is the same, step is the number of steps the timer takes to move the image once, and speed is the time interval of the timer.
The above timer code borrowed a piece of code from the Internet, But I made some improvements myself.
The calling code is given below:

Copy the code The code is as follows:

<script></script>
<script> <BR>var a=sx.activex.dynamicpic.init(["1 (1).jpg","1.jpg" ,"1 (2).jpg","1 (3).jpg"],"2px red solid",5,500,100,2,10); <BR>document.body.appendChild(a); <BR>< /script> <BR> <BR> <BR></script>

Okay, it’s basically done, please let me know if you have any questions!