ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript ドラッグアンドドロップページめくり効果 code_page 背景

JavaScript ドラッグアンドドロップページめくり効果 code_page 背景

WBOYオリジナル: 2016-05-16 18:33:23890ブラウズ

<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 すべて選択注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Java、C# などの JavaScript によって実装されたスリープ一時停止機能コード_JavaScript スキル次の記事：Java、C# などの JavaScript によって実装されたスリープ一時停止機能コード_JavaScript スキル

続きを見る

JavaScript ドラッグ アンド ドロップ ページめくり効果 code_page 背景

関連記事

JavaScript ドラッグアンドドロップページめくり効果 code_page 背景