• 2010-09-13

    牵线跳动js特效(兼容ie&ff&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/74886784.html

    牵线跳动js特效,代码存档。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>pop</title>
    <STYLE>
    v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <script>
    mydo=null;
    mydo2=null;
    myobj=null;
    small=99;
    big=299;
    speed=4;
    x=y=0;
    function myget(e)
    {
    x=(!e)?event.clientX:e.clientX;
    y=(!e)?event.clientY:e.clientY;
    }
    function getAbsoluteLeft( ob ){
    if(!ob){return null;}
    var obj = ob;
    var objLeft = obj .offsetLeft;
    while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
    objLeft += obj .offsetParent.offsetLeft;
    obj = obj .offsetParent;
    }
    return objLeft ;
    }
    function getAbsoluteTop( ob ){
    if(!ob){return null;}
    var obj = ob;
    var objTop = obj .offsetTop;
    while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
    objTop += obj .offsetParent.offsetTop;
    obj = obj .offsetParent;
    }
    return objTop ;
    }
    function myover()
    {
    clearTimeout(mydo2);
    if(myobj.width>=big){return;}
    myobj.width+=speed;
    myobj.height+=speed;
    mydo=setTimeout(myover,10);
    }
    function myout()
    {
    clearTimeout(mydo);
    if(myobj.width<=small){myobj.style.display='none';return;}
    myobj.width-=speed;
    myobj.height-=speed;
    mydo2=setTimeout(myout,10);
    }
    function myshow(i)
    {
    sobj=document.getElementById("div"+i);
    document.getElementById("myimg").src=images[i];
    document.getElementById("myimg").width=small;
    document.getElementById("myimg").height=small;
    document.getElementById("myimg").style.display="block";
    document.getElementById("picdiv").style.top=getAbsoluteTop(sobj)+"px";
    document.getElementById("picdiv").style.left=getAbsoluteLeft(sobj)+"px";
    document.getElementById("picdiv").style.zIndex=index++;
    myobj=document.getElementById("myimg");
    mydo=setTimeout(myover,10);
    }
    </script>
    <script>
    divw=150;
    divh=100;
    ch=cw=border=5;
    count=6;
    drawspeed=100;
    if(document.all)
    offset=30;
    else
    offset=20;
    mycolor=new Array("red","blue","yellow","green","gray","pink","orange","purple","lightblue","lightgreen");
    arr=new Array(1,-1);
    flyarr=new Array();
    index=centerl=centert=0;
    p=new Array();
    linecolor="gray";
    imageObj = new Image();
    images = new Array();
    var Browser = {
    'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
    'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,
    'isOpera' : navigator.userAgent.indexOf('Opera') >= 0
    };
    function mydraw()
    {
    p.length=0;
    for(i=0;i<count;i++)
    {
    obj=document.getElementById("div"+i);
    p.push(obj.offsetLeft+l+divw/2,obj.offsetTop+t+divh/2);
    p.push(centerl,centert);
    }
    points=p.join(",");
    if((p.length<4)||(p.length%2!=0))
    return false;
    if(Browser.isIE)
    {
    document.getElementById("drawdiv").innerHTML="";
    polyline=document.createElement("v:polyline");
    polyline.strokecolor=linecolor;
    polyline.filled=false;
    polyline.points=points;
    document.getElementById("drawdiv").appendChild(polyline);
    }
    else
    {
    polyline=document.getElementById("line");
    xmax=0;
    ymax=0;
    for(i=0;i<p.length;i++)
    {
    if(p[i]-xmax>0)
    xmax=p[i];
    if(p[++i]-ymax>0)
    ymax=p[i];
    }
    polyline.width=xmax;
    polyline.height=ymax;
    ctx=polyline.getContext("2d");
    ctx.strokeStyle=linecolor;
    ctx.beginPath();
    ctx.moveTo(p[0],p[1]);
    for(i=2;i<p.length;i++)
    ctx.lineTo(p[i],p[++i]);
    ctx.stroke();
    }
    }
    function myplay(e)
    {
    currentobj=(!e)?event.srcElement:e.target;
    i=currentobj.id.split("div")[1];
    flyarr[i]=setInterval("myfly("+i+")",drawspeed);
    }
    function mypause(e)
    {
    currentobj=(!e)?event.srcElement:e.target;
    i=currentobj.id.split("div")[1];
    clearInterval(flyarr[i]);
    flyarr[i]=null;
    currentobj.style.zIndex=index++;
    myshow(i);
    }
    function myfly(i)
    {
    obj=document.getElementById("div"+i);
    if(obj.offsetTop<=border)
    t=2;
    else if(obj.offsetTop>=h-divh-border*2)
    t=-2;
    else
    t=arr[Math.round(Math.random()*(arr.length-1))];
    if(obj.offsetLeft<=border)
    l=2;
    else if(obj.offsetLeft>=w-divw-border*2)
    l=-2;
    else
    l=arr[Math.round(Math.random()*(arr.length-1))];
    obj.style.top=obj.offsetTop+t+"px";
    obj.style.left=obj.offsetLeft+l+"px";
    mydraw();
    }
    function divload()
    {
    pageobj=document.documentElement;
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    centerleft=(w-cw)/2;
    centertop=(h-ch)/2;
    centerl=(w-offset)/2;
    centert=(h-offset)/2;
    mydiv=document.createElement("div");
    mydiv.style.position="absolute";
    mydiv.style.width=cw+"px";
    mydiv.style.height=ch+"px";
    mydiv.style.overflow="hidden";
    mydiv.style.left=centerleft+"px";
    mydiv.style.top=centertop+"px";
    mydiv.style.backgroundColor="red";
    document.getElementById("pointdiv").appendChild(mydiv);
    if(!Browser.isIE)
    {
    mycanvas=document.createElement("canvas");
    mycanvas.width=w-offset;
    mycanvas.height=h-offset;
    mycanvas.id="line";
    document.getElementById("drawdiv").appendChild(mycanvas);
    }
    for(i=0;i<count;i++)
    {
    mydiv=document.createElement("div");
    mydiv.style.backgroundColor=mycolor[Math.round(Math.random()*(mycolor.length-1))];
    mydiv.style.width=divw+"px";
    mydiv.style.height=divh+"px";
    mydiv.style.lineHeight=divh+"px";
    mydiv.style.verticalAlign="middle";
    mydiv.style.textAlign="center";
    mydiv.style.border=border+"px solid black";
    mydiv.style.position='absolute';
    mydiv.style.top=Math.round(Math.random()*(h-divh-border*2))+"px";
    mydiv.style.left=Math.round(Math.random()*(w-divw-border*2))+"px";
    mydiv.id="div"+i;
    mydiv.innerHTML=i;
    mydiv.onmouseover=mypause;
    mydiv.onmouseout=myplay;
    document.getElementById("showdiv").appendChild(mydiv);
    images[i]="images/js_"+(parseInt(i)+1)+".gif";
    imageObj.src=images[i];
    flyarr[i]=setInterval("myfly("+i+")",drawspeed);
    }
    }
    document.onmousemove=myget;
    window.onload=divload;
    </script>
    </head>
    <body>
    <div id=drawdiv></div>
    <div id=pointdiv></div>
    <div id=showdiv></div>
    <div id=picdiv style="position:absolute"><img id="myimg" style="display:none;cursor:pointer" onmouseover='myobj=this;myover()' onmouseout='myobj=this;myout()'/></div>
    </body>
    </html>

    分享到: