• 2006-10-24

    前后翻页的js代码 - [技术空间]

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

    修订版实现了图像预装载功能,代码见:http://www.blogbus.com/lily64-logs/3695280.html

    写了一段模拟翻书效果的通用js代码。调试还费了点劲儿呢。存档。演示效果见左下角,呵呵。
    注:ie缓存设置为默认的“自动”。如果设置为“每次检查”则效果失败,改用Image()对象预装载图像也不行,因为此时不允许浏览器直接从缓存中调用图片。
    参考链接:http://www.adaptiveline.com/articles/tech/slidingdoors2/
    <s c r i p t>
    w=280;
    speed1=1;
    speed2=3;
    mybool=true;
    i=0;
    obj=null;
    function mypage()
    {
    if(mybool)
    {
    if(obj.offsetWidth-speed2>=0)
    obj.style.width=obj.offsetWidth-speed2;
    else
    obj.style.width=0;
    if(obj.offsetWidth>0)
    setTimeout(mypage,speed1);
    else
    {
    document.all.mybtn.disabled=false;
    document.all.mybtn2.disabled=false;
    return;
    }
    }
    else
    {
    if(obj.offsetWidth+speed2<=w)
    obj.style.width=obj.offsetWidth+speed2;
    else
    obj.style.width=w;
    if(obj.offsetWidth<w)
    setTimeout(mypage,speed1);
    else
    {
    document.all.mybtn.disabled=false;
    document.all.mybtn2.disabled=false;
    return;
    }
    }
    }
    function myobj(mybool2)
    {
    document.all.mybtn.disabled=true;
    document.all.mybtn2.disabled=true;
    mybool=mybool2;
    if(mybool2)
    {
    if(i==document.all.mydiv.getElementsByTagName("div").length-1)
    {
    document.all.mydiv.getElementsByTagName("div")[0].style.width=w;
    document.all.mydiv.getElementsByTagName("div")[0].style.zIndex=0;
    }
    if(i<document.all.mydiv.getElementsByTagName("div").length)
    {
    obj=document.all.mydiv.getElementsByTagName("div")[i++];
    }
    else
    {
    i=0;
    obj=document.all.mydiv.getElementsByTagName("div")[i++];
    obj.style.zIndex=100;
    for(j=1;j<document.all.mydiv.getElementsByTagName("div").length;j++)
    document.all.mydiv.getElementsByTagName("div")[j].style.width=w;
    }
    }
    else
    {
    if(i==1)
    {
    document.all.mydiv.getElementsByTagName("div")[0].style.width=0;
    document.all.mydiv.getElementsByTagName("div")[0].style.zIndex=100;
    }
    if(i>0)
    {
    obj=document.all.mydiv.getElementsByTagName("div")[--i];
    }
    else
    {
    i=document.all.mydiv.getElementsByTagName("div").length-1;
    obj=document.all.mydiv.getElementsByTagName("div")[i];
    document.all.mydiv.getElementsByTagName("div")[0].style.zIndex=0;
    for(j=1;j<document.all.mydiv.getElementsByTagName("div").length;j++)
    document.all.mydiv.getElementsByTagName("div")[j].style.width=0;
    }
    }
    mypage();
    }
    </s c r i p t>
    <input name=mybtn2 type=button value=last o n c l i c k='myobj(false)'><input name=mybtn type=button value=next o n c l i c k='myobj(true)'><br>
    <div id=mydiv>
    <div style="position:absolute;z-index:5;background-image:url(1.gif);width:280;height:187"></div>
    <div style="position:absolute;z-index:4;background-image:url(2.gif);width:280;height:187"></div>
    <div style="position:absolute;z-index:3;background-image:url(3.gif);width:280;height:187"></div>
    <div style="position:absolute;z-index:2;background-image:url(4.gif);width:280;height:187"></div>
    <div style="position:absolute;z-index:1;background-image:url(5.gif);width:280;height:187"></div>
    </div>
    分享到:

    历史上的今天: