JavaScript 드래그 앤 드롭 페이지 넘김 효과 code

JavaScript 드래그 앤 드롭 페이지 넘김 효과 code_page 배경

WBOY

풀어 주다： 2016-05-16 18:33:23

원래의

860명이 탐색했습니다.

<title>드래그 페이지 넘김 효과 JavaScript 특수 효과-데모(http://www.jb51.net)</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>

<div id="menu">
<div class="page">
    <ul>
        <li>
            <span></span>09-11-25<a href="/" target="_blank"></a>RSA 파일 암호화 원리 및 코드 구현</li>
<li>
            <span></span>09-11-25<a href="http://www.jb51.net" target="_blank"></a>C# 소프트웨어 백도어 프로그램 코드</li>
<li style="background:coral;">
            <span></span>09-11-25<a href="/" target="_blank"></a>프로젝트 관리 소프트웨어 PHP 버전</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>손잡고</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>첫사랑 소년의 집</li>
</ul>
        </div>
    <div class="page">
    <ul>
        <li>
            <span></span>09-11-25<a href="/" target="_blank"></a>아! 멈출 수 없는 사랑</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>검색엔진통합검색시스템</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>유혹의 비</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>2000년 과거</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>그린 테러리스트</li>
</ul>
        </div>
    <div class="page">
    <ul>
        <li>
            <span></span>09-11-25<a href="/" target="_blank"></a>시간이 점점 사라지고 있습니다</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>고요한 온천</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>하늘이 피어난다</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>아파이가 강아지를 키웠어요</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>참 또는 거짓</li>
<li>
            <span></span>09-11-25<a href="/" target="_blank"></a>남대만 차이공산당</li>
</ul>
        </div>
    </div>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]