用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.
先说下思路:
首先动态创建一个html结构
复制代码 代码如下:
.............
这个很关键,然后设置一个计时器来模拟img的移动,并且绑定外层div的onmouseenter和onmouseleave事件.最后将外层的div对象返回.
下面看代码
复制代码 代码如下:
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;
}
}
函数参数的imga是你要传入img地址的数组,border是图片的边框属性,margin是图片间的距离,w是外层div的width,h同理,step是计时器执行一次图片移动的步数,speed是计时器的时间间隔.
上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.
下面给出调用代码:
复制代码 代码如下:
untitled document
好了,基本搞定,有什么问题还请多多交流啊!