javascript实现跑马灯悬停放大效果

来源：互联网发布：php curl 选项编辑：程序博客网时间：2024/05/16 10:24

用过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("<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.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是计时器的时间间隔.

上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.

下面给出调用代码:

<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>

好了,基本搞定,有什么问题还请多多交流啊!