Friends who have used QQ space should be familiar with this. The effect is very bright, but they are implemented with flash, then JavaScript can be, I thought about three days, finally made almost, but still some places are not perfect, but also hope that we have a lot of understanding, I will be perfect in the future.
let 's get to the idea.:
Create an HTML structure dynamically first
Copy Code code as follows:
<div style= "Overflow-x:hidden;" >
<table border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td> .............</td>
<td></td>
</tr>
</table>
</div>
This is critical, then set up a timer to simulate the move of IMG, and bind the Onmouseenter and OnMouseLeave events of the outer Div. Finally, the outer div object is returned.
look at the code below
Copy Code code 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 ("<table border=/" 0/"cellspacing=/" 0/"cellpadding=/" 0/">");
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<c.length;i++) {
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 you want to pass in the IMG address, border is the border property of the picture, margin is the distance between the pictures, W is the width,h of the outer Div. The step is the number of steps a timer takes to move a picture, speed is the time interval for the timer.
The timer code above borrowed a piece of code from the Web, but I made some improvements myself.
The calling code is given below:
Copy Code code as follows:
<title>untitled document</title>
<body>
<script src= "Kongjian.js" ></script>
<script>
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);
Document.body.appendChild (a);
</script>
</body>
OK, basically fix, have what question also please a lot of exchanges Ah!
