用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.
先说下思路:
首先动态创建一个html结构
<div style="overflow-x:hidden;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg">.............</td>
<td></td>
</tr>
</table>
</div>
这个很关键,然后设置一个计时器来模拟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("<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;i<imga.length;i++){
- var 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.οnmοuseleave=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是计时器的时间间隔.
上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.
下面给出调用代码:
- <html>
- <head>
- <title>Untitled Document</title>
- </head>
- <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>
- </html>
好了,基本搞定,有什么问题还请多多交流啊!