• 2010-12-01

    鼠标滚轴控制图片轮转(兼容ie&ff&op) - [技术空间]

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

    模拟flash的鼠标滚轴控制图片轮转效果,代码存档。
    <!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=utf-8" />
    <title>pic turn</title>
    <style>
    *{ margin:0; padding:0}
    </style>
    <script language="javascript">
    imageObj = new Image();
    imagearr = new Array();
    myangle=0;
    speed=opacityspeed=10;
    speed2=2500;
    anglespeed=15;
    myindex=1000;
    labelopacity=100;
    labelstep=2;
    maxy=0;
    linex=100;
    liney=300;
    picw=pich=120;
    count=8;
    labelwidth=200;
    labelheight=40;
    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 turn()
    {
    for(i=0;i<count;i++)
    {
    angle=Math.round(i*360/count)+90+myangle;
    if(angle>450)angle=angle-360;
    else if(angle<90)angle=angle+360;
    thispich=pich+Math.abs(270-angle);
    thispicw=picw+Math.abs(270-angle);
    y=Math.round(Math.sin(angle/180*3.14)*linex+centert-thispich/2);
    if(y>maxy)maxy=y;
    x=Math.round(Math.cos(angle/180*3.14)*liney+centerl-thispicw/2);
    document.getElementByIdx_x("div"+i).style.top=y+"px";
    document.getElementByIdx_x("div"+i).style.left=x+"px";
    document.getElementByIdx_x("div"+i).style.height=thispich+"px";
    document.getElementByIdx_x("div"+i).style.width=thispicw+"px";
    document.getElementByIdx_x("div"+i).firstChild.style.height=thispich+"px";
    document.getElementByIdx_x("div"+i).firstChild.style.width=thispicw+"px";
    document.getElementByIdx_x("div"+i).style.zIndex=myindex+y;
    if(Browser.isIE)
    document.getElementByIdx_x("div"+i).style.filter="alpha(opacity="+Math.abs(100-maxy+y)+")";
    else
    document.getElementByIdx_x("div"+i).style.opacity=Math.abs(100-maxy+y)/100;
    }
    if(myangle%Math.round(360/count)==0)
    {
    myangle+=anglespeed;
    myangle=myangle60;
    setTimeout(turn,speed2);
    }
    else
    {
    myangle+=anglespeed;
    setTimeout(turn,speed);
    }
    }
    function draw()
    {
    pageobj=document.documentElement;
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    centert=h/2;
    centerl=w/2;
    pointdiv=imagesdiv="";
    for(i=45;i<90;i+=0.1)
    {
    y=linex*(Math.sin(i))+centert;
    x=liney*(Math.cos(i))+centerl;
    pointdiv+="<div style=\"position:absolute; top:"+y+"px; left:"+x+"px; color:#0066FF; width:1px; height:1px; background-color:#3333FF;overflow:hidden;font-size:0\"></div>";
    }
    for(i=0;i<count;i++)
    {
    imagearr[i]=(parseInt(i)+1)+".jpg";
    imageObj.src=imagearr[i];
    angle=Math.round(i*360/count)+90;
    thispich=pich+Math.abs(270-angle);
    thispicw=picw+Math.abs(270-angle);
    y=Math.sin(angle/180*3.14)*linex+centert-thispich/2;
    x=Math.cos(angle/180*3.14)*liney+centerl-thispicw/2;
    imagesdiv+="<div id='div"+i+"' style=\"position:absolute; top:"+y+"px; left:"+x+"px; color:#0066FF; width:"+thispicw+"px; height:"+thispich+"px; border:1px solid #3333FF;overflow:hidden;font-size:12px\"><img src='"+imagearr[i]+"'></div>";
    }
    labeldiv="<div id=mylabel style='z-index:2000;position:absolute;height:"+labelheight+"px;width:"+labelwidth+"px;top:"+(centert-100)+"px;left:"+(centerl-labelwidth/2)+"px;line-height:"+labelheight+"px;vertical-align:middle;text-align:center'>可用鼠标滚轴控制浏览</div>";
    document.getElementByIdx_x("maindiv").innerHTML=pointdiv+imagesdiv+labeldiv;
    setTimeout(turn,speed);
    setTimeout(myhidden,opacityspeed);
    }
    function myhidden()
    {
    if(labelopacity<=0){labelopacity=0;myshow();return;}
    labelopacity-=labelstep;
    if(Browser.isIE)
    document.getElementByIdx_x("mylabel").style.filter="alpha(opacity="+labelopacity+")";
    else
    document.getElementByIdx_x("mylabel").style.opacity=labelopacity/100;
    setTimeout(myhidden,opacityspeed);
    }
    function myshow()
    {
    if(labelopacity>=100){labelopacity=100;myhidden();return;}
    labelopacity+=labelstep;
    if(Browser.isIE)
    document.getElementByIdx_x("mylabel").style.filter="alpha(opacity="+labelopacity+")";
    else
    document.getElementByIdx_x("mylabel").style.opacity=labelopacity/100;
    setTimeout(myshow,opacityspeed);
    }
    function mywheel(e)
    {
    blog=-1;
    if(Browser.isFirefox)
    {
    if(e.detail>0)
    blog=1;
    }
    else if(event.wheelDelta<0)
    blog=1;
    anglespeed=Math.abs(anglespeed)*blog;
    myangle+=anglespeed;
    myangle=myangle60;
    }
    if(Browser.isFirefox)
    window.addEventListener('DOMMouseScroll', mywheel, false);
    else
    document.onmousewheel=mywheel;
    window.onload=draw;
    </script>
    </head>
    <body>
    <div id="maindiv">
    </div>
    </body>
    </html>

    分享到:

    历史上的今天: