JavaScript 拖拽翻页效果代码

<html> 
<head> 
<title>拖拽翻页效果JavaScript特效-demo by http://www.glzy8.com</title> 
<style type="text/css"> 
html,body{ 
    width:100%; 
    height:100%; 
    border:0px; 
    margin:0px; 
    overflow:hidden; 
} 
#menu{ 
    width:1000px; 
    height:500px; 
    overflow:hidden; 
    background:lightblue; 
} 
.page{ 
    position:absolute; 
    width:300px; 
    height:400px; 
    left:350px; 
    top:50px; 
    background:#FFF; 
    border:1px solid #999; 
} 
ul{ 
    list-style:none; 
    height:320px; 
    margin:20px; 
    padding:0px; 
    background:#EEE; 
} 
li{ 
     
    font-size:12px; 
    height:20px; 
    line-height:20px; 
    border-bottom:1px dashed #999; 
} 
li span{ 
    float:right; 
} 
li a{ 
    color:#000; 
    text-decoration:none; 
} 
li a:hover{ 
    text-decoration:underline; 
} 
.tip{ 
    display:block; 
    height:20px; 
    margin:0px 20px; 
    line-height:20px; 
    text-align:center; 
    font-size:12px; 
    background:#999; 
} 
</style> 
</head> 
<body> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20id(obj)%7B%20%0D%0A%20%20%20%20return%20document.getElementById(obj)%3B%20%0D%0A%7D%20%0D%0Avar%20page%3B%20%0D%0Avar%20mx%3B%20%0D%0Avar%20md%3Dfalse%3B%20%0D%0Avar%20sh%3D0%3B%20%0D%0Avar%20en%3Dfalse%3B%20%0D%0Awindow.onload%3Dfunction()%7B%20%0D%0A%20%20%20%20page%3Did(%22menu%22).getElementsByTagName(%22div%22)%3B%20%0D%0A%20%20%20%20if(page.length%3E0)%7B%20%0D%0A%20%20%20%20%20%20%20%20page%5B0%5D.style.zIndex%3D2%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20for(i%3D0%3Bi%3Cpage.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20page%5Bi%5D.innerHTML%2B%3D%22%3Cspan%20class%3D%5C%22tip%5C%22%3E%22%2B(i%2B1)%2B%22%2F%22%2Bpage.length%2B%22%E9%A1%B5%20%E6%8B%96%E6%8B%BD%E7%BF%BB%E9%A1%B5%3C%2Fspan%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20page%5Bi%5D.id%3D%22page%22%2Bi%3B%20%0D%0A%20%20%20%20%20%20%20%20page%5Bi%5D.i%3Di%3B%20%0D%0A%20%20%20%20%20%20%20%20page%5Bi%5D.onmousedown%3Dfunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!en)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(!e)%7Be%3De%7C%7Cwindow.event%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ex%3De.pageX%3Fe.pageX%3Ae.x%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mx%3D350-ex%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.cursor%3D%22move%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20md%3Dtrue%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(document.all)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.setCapture()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20page%5Bi%5D.onmousemove%3Dfunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(md)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20en%3Dtrue%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(!e)%7Be%3De%7C%7Cwindow.event%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ex%3De.pageX%3Fe.pageX%3Ae.x%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.left%3Dex%2Bmx%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(this.offsetLeft%3C350)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20cu%3D(this.i%3D%3D0)%3Fpage.length-1%3Athis.i-1%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20page%5Bsh%5D.style.zIndex%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20page%5Bcu%5D.style.zIndex%3D1%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.zIndex%3D2%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sh%3Dcu%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(this.offsetLeft%3E350)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20cu%3D(this.i%3D%3Dpage.length-1)%3F0%3Athis.i%2B1%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20page%5Bsh%5D.style.zIndex%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20page%5Bcu%5D.style.zIndex%3D1%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.zIndex%3D2%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sh%3Dcu%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20page%5Bi%5D.onmouseup%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20this.style.cursor%3D%22default%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20md%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(this.offsetLeft%3D%3D350)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20en%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(document.all)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.releaseCapture()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.releaseEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20flyout(this)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20flyout(obj)%7B%20%0D%0A%20%20%20%20if(obj.offsetLeft%20%3C%20350)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(%20(obj.offsetLeft%20-%2010)%20%3E%2050%20)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3Dobj.offsetLeft%20-%2010%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.setTimeout(%22flyout(id('%22%2Bobj.id%2B%22'))%3B%22%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3D%2050%20%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.zIndex%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20flyin(id(obj.id))%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(obj.offsetLeft%20%3E%20350)%7B%20%0D%0A%20%20%20%20%20%20%20%20if((obj.offsetLeft%20%2B%2010)%20%3C%20650)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3Dobj.offsetLeft%20%2B%2010%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.setTimeout(%22flyout(id('%22%2Bobj.id%2B%22'))%3B%22%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3D%20650%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.zIndex%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20flyin(id(obj.id))%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20flyin(obj)%7B%20%0D%0A%20%20%20%20if(obj.offsetLeft%3C350)%7B%20%0D%0A%20%20%20%20%20%20%20%20if((obj.offsetLeft%20%2B%2010)%20%3C%20350)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3Dobj.offsetLeft%20%2B%2010%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.setTimeout(%22flyin(id('%22%2Bobj.id%2B%22'))%3B%22%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3D%20350%20%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20en%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(obj.offsetLeft%3E350)%7B%20%0D%0A%20%20%20%20%20%20%20%20if((obj.offsetLeft%20-%2010)%20%3E%20350)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3Dobj.offsetLeft%20-%2010%20%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.setTimeout(%22flyin(id('%22%2Bobj.id%2B%22'))%3B%22%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.style.left%3D350%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20en%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<div id="menu"> 
    <div class="page"> 
        <ul> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">RSA文件加密原理及代码实现</a></li> 
            <li><span>09-11-25</span><a href="http://www.glzy8.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com" target="_blank">C#软件后门程序代码</a></li> 
            <li style="background:coral;"><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">项目管理软件PHP版</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">手牵手</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">初恋的少年家</a></li> 
        </ul> 
    </div> 
    <div class="page"> 
        <ul> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">啊！停不住的爱人</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">搜索引擎整合搜索系统</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">倾城之雨</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">往事2000</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">绿色恐怖分子</a></li> 
        </ul> 
    </div> 
    <div class="page"> 
        <ul> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">时光在慢慢消失</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">宁静温泉</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">变天着花</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">阿辉饲了一只狗</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">真的假的</a></li> 
            <li><span>09-11-25</span><a href="/" _ewebeditor_ta_href="%2F" target="_blank">南台湾仔共</a></li> 
        </ul> 
    </div> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程