• 2010-09-01

    js版自定义广告转盘(兼容ie&ff&op) - [技术空间]

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

    写了个自定义广告转盘,动态轮换效果,代码存档。
    1,顺时针旋转
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>ads turn</title>
    <script>
    divarr=new Array();
    currentobj=myrun=null;
    ch=cw=5;
    divh=divw=100;
    line=200;
    centertop=centerleft=0;
    function myturn2()
    {
    mystop=0;
    for(i in divarr)
    {
    angle=parseInt(document.getElementById("div"+i).getAttribute("myangle"))+1;
    document.getElementById("div"+i).setAttribute("myangle",-90+(angle+90)%360);
    if(document.getElementById("div"+i)==currentobj&&(angle+90)%360==0)mystop=1;
    mytop=centertop+Math.sin(angle/180*3.14)*line;
    myleft=centerleft+Math.cos(angle/180*3.14)*line;
    document.getElementById("div"+i).style.top=mytop-divh/2+"px";
    document.getElementById("div"+i).style.left=myleft-divw/2+"px";
    }
    if(mystop){myrun=null;return;}
    myrun=setTimeout(myturn2,1);
    }
    function myturn(e)
    {
    if(myrun!=null)return;
    currentobj=(!e)?event.srcElement:e.target;
    angle=parseInt(currentobj.getAttribute("myangle"));
    if((angle+90)%360==0){myrun=null;return;}
    myrun=setTimeout(myturn2,1);
    }
    function mysel()
    {
    clearTimeout(myrun);
    myrun=null;
    divarr.length=0;
    for(j=0;j<document.getElementsByName("chk").length;j++)
    if(document.getElementsByName("chk")[j].checked)
    divarr.push(document.getElementsByName("chk")[j].value);
    document.getElementById("maindiv").innerHTML="";
    for(i in divarr)
    {
    mydiv=document.createElement("div");
    mydiv.style.position="absolute";
    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="1px solid lightgreen";
    mydiv.style.backgroundColor="orange";
    angle=Math.round(i*360/divarr.length)-90;
    mytop=centertop+Math.sin(angle/180*3.14)*line;
    myleft=centerleft+Math.cos(angle/180*3.14)*line;
    mydiv.style.top=mytop-divh/2+"px";
    mydiv.style.left=myleft-divw/2+"px";
    mydiv.innerHTML=(parseInt(i)+1)+divarr[i];
    mydiv.id="div"+i;
    mydiv.setAttribute("myangle",angle);
    mydiv.onmouseover=myturn;
    document.getElementById("maindiv").appendChild(mydiv);
    }
    }
    function myload()
    {
    pageobj=document.documentElement;
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    l=pageobj.scrollLeft;
    t=pageobj.scrollTop;
    centerleft=(w-cw)/2+l;
    centertop=(h-ch)/2+t;
    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);
    }
    window.onload=myload;
    </script>
    </head>
    <body>choose:
    <input type=checkbox onclick=mysel() name=chk value="犬夜叉" />犬夜叉
    <input type=checkbox onclick=mysel() name=chk value="记得" />记得
    <input type=checkbox onclick=mysel() name=chk value="大爱无言" />大爱无言
    <input type=checkbox onclick=mysel() name=chk value="恋曲1980" />恋曲1980
    <input type=checkbox onclick=mysel() name=chk value="心动" />心动
    <input type=checkbox onclick=mysel() name=chk value="车手" />车手
    <input type=checkbox onclick=mysel() name=chk value="青花瓷" />青花瓷
    <input type=checkbox onclick=mysel() name=chk value="故乡的炊烟" />故乡的炊烟
    <div id=maindiv></div>
    <div id=pointdiv></div>
    </body>
    </html>

    2,双向旋转
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>ads turn</title>
    <script>
    divarr=new Array();
    currentobj=myrun=null;
    ch=cw=5;
    divh=divw=100;
    line=200;
    flag=centertop=centerleft=0;
    function myturn2()
    {
    mystop=0;
    for(i in divarr)
    {
    angle=parseInt(document.getElementById("div"+i).getAttribute("myangle"))+flag;
    document.getElementById("div"+i).setAttribute("myangle",-90+(angle+90)%360);
    if(document.getElementById("div"+i)==currentobj&&(angle+90)%360==0)mystop=1;
    mytop=centertop+Math.sin(angle/180*3.14)*line;
    myleft=centerleft+Math.cos(angle/180*3.14)*line;
    document.getElementById("div"+i).style.top=mytop-divh/2+"px";
    document.getElementById("div"+i).style.left=myleft-divw/2+"px";
    }
    if(mystop){myrun=null;return;}
    myrun=setTimeout(myturn2,1);
    }
    function myturn(e)
    {
    if(myrun!=null)return;
    currentobj=(!e)?event.srcElement:e.target;
    angle=parseInt(currentobj.getAttribute("myangle"));
    if((angle+90)%360==0){myrun=null;return;}
    if(((angle+90)%360>0&&(angle+90)%360<=180)||((angle+90)%360<=-180&&(angle+90)%360>-360))flag=-1;else flag=1;
    myrun=setTimeout(myturn2,1);
    }
    function mysel()
    {
    clearTimeout(myrun);
    myrun=null;
    divarr.length=0;
    for(j=0;j<document.getElementsByName("chk").length;j++)
    if(document.getElementsByName("chk")[j].checked)
    divarr.push(document.getElementsByName("chk")[j].value);
    document.getElementById("maindiv").innerHTML="";
    for(i in divarr)
    {
    mydiv=document.createElement("div");
    mydiv.style.position="absolute";
    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="1px solid lightgreen";
    mydiv.style.backgroundColor="orange";
    angle=Math.round(i*360/divarr.length)-90;
    mytop=centertop+Math.sin(angle/180*3.14)*line;
    myleft=centerleft+Math.cos(angle/180*3.14)*line;
    mydiv.style.top=mytop-divh/2+"px";
    mydiv.style.left=myleft-divw/2+"px";
    mydiv.innerHTML=(parseInt(i)+1)+divarr[i];
    mydiv.id="div"+i;
    mydiv.setAttribute("myangle",angle);
    mydiv.onmouseover=myturn;
    document.getElementById("maindiv").appendChild(mydiv);
    }
    }
    function myload()
    {
    pageobj=document.documentElement;
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    l=pageobj.scrollLeft;
    t=pageobj.scrollTop;
    centerleft=(w-cw)/2+l;
    centertop=(h-ch)/2+t;
    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);
    }
    window.onload=myload;
    </script>
    </head>
    <body>choose:
    <input type=checkbox onclick=mysel() name=chk value="犬夜叉" />犬夜叉
    <input type=checkbox onclick=mysel() name=chk value="记得" />记得
    <input type=checkbox onclick=mysel() name=chk value="大爱无言" />大爱无言
    <input type=checkbox onclick=mysel() name=chk value="恋曲1980" />恋曲1980
    <input type=checkbox onclick=mysel() name=chk value="心动" />心动
    <input type=checkbox onclick=mysel() name=chk value="车手" />车手
    <input type=checkbox onclick=mysel() name=chk value="青花瓷" />青花瓷
    <input type=checkbox onclick=mysel() name=chk value="故乡的炊烟" />故乡的炊烟
    <div id=maindiv></div>
    <div id=pointdiv></div>
    </body>
    </html>

    分享到:

    历史上的今天: