欧美激情中文字幕,亚洲欧美久久婷婷爱综合一区天堂

　拖拽翻頁(ThrowPage)詳解

作者：kubau0　時(shí)間： 2009-11-30　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁拖拽翻頁(ThrowPage)詳解 [1]
第 2 頁拖拽翻頁(ThrowPage)詳解 [2]
第 3 頁拖拽翻頁(ThrowPage)詳解 [3]
第 4 頁拖拽翻頁(ThrowPage)詳解 [4]

今年4月，我在宿舍憋出一個(gè)拖拽翻頁效果

原帖傳送：http://bbs.blueidea.com/thread-2921611-1-1.html
修改版?zhèn)魉停?a target="_blank">http://bbs.blueidea.com/thread-2924151-1-1.html

原本是為自己的博客網(wǎng)站設(shè)計(jì)的，周二產(chǎn)生的靈感，周三周四逃課兩天算坐標(biāo)，周五回家，到傍晚才算寫出了第一版，發(fā)布之后沒想到評(píng)價(jià)還不錯(cuò)，此后太多人問我這個(gè)效果應(yīng)該怎么修改，才能用到自己的網(wǎng)站上，所以現(xiàn)在發(fā)這個(gè)帖子詳細(xì)解釋一下這個(gè)效果的原理

在此正式將此效果命名為 ThrowPage ，而且我肯定會(huì)繼續(xù)完善這個(gè)效果，并發(fā)布封裝好的代碼，方便大家調(diào)用，可能一個(gè)月后，也可能一年后，In Me God Trust

本文將按結(jié)構(gòu)層、表現(xiàn)層、行為層三層分開的順序來寫：

運(yùn)行代碼框
<html> <head> <title>ThrowPage</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> <script type="text/javascript"> function id(obj){ return document.getElementById(obj); } var page; var mx; var md=false; var sh=0; var en=false; window.onload=function(){ page=id("menu").getElementsByTagName("div"); if(page.length>0){ page[0].style.zIndex=2; } for(i=0;i<page.length;i++){ page[i].innerHTML+="<span class=\"tip\">"+(i+1)+"/"+page.length+"頁拖拽翻頁</span>"; page[i].id="page"+i; page[i].i=i; page[i].onmousedown=function(e){ if(!en){ if(!e){e=e||window.event;} ex=e.pageX?e.pageX:e.x; mx=350-ex; this.style.cursor="move"; md=true; if(document.all){ this.setCapture(); }else{ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } } } page[i].onmousemove=function(e){ if(md){ en=true; if(!e){e=e||window.event;} ex=e.pageX?e.pageX:e.x; this.style.left=ex+mx+"px"; if(this.offsetLeft<350){ var cu=(this.i==0)?page.length-1:this.i-1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } if(this.offsetLeft>350){ var cu=(this.i==page.length-1)?0:this.i+1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } } } page[i].onmouseup=function(){ this.style.cursor="default"; md=false; if(this.offsetLeft==350){ en=false; } if(document.all){ this.releaseCapture(); }else{ window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); } flyout(this); } } } function flyout(obj){ if(obj.offsetLeft < 350){ if( (obj.offsetLeft - 10) > 50 ){ obj.style.left=obj.offsetLeft - 10 + "px"; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left= 50 +"px"; obj.style.zIndex=0; flyin(id(obj.id)); } } if(obj.offsetLeft > 350){ if((obj.offsetLeft + 10) < 650){ obj.style.left=obj.offsetLeft + 10 + "px"; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left= 650 + "px"; obj.style.zIndex=0; flyin(id(obj.id)); } } } function flyin(obj){ if(obj.offsetLeft<350){ if((obj.offsetLeft + 10) < 350){ obj.style.left=obj.offsetLeft + 10+"px"; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left= 350 +"px"; en=false; } } if(obj.offsetLeft>350){ if((obj.offsetLeft - 10) > 350){ obj.style.left=obj.offsetLeft - 10 +"px"; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left=350+"px"; en=false; } } } </script> <div id="menu"> <div class="page"> <ul> <li><span>09-11-25</span><a target="_blank">伴侶</a></li> <li><span>09-11-25</span><a target="_blank">美麗島</a></li> <li style="background:coral;"><span>09-11-25</span><a target="_blank">舞女</a></li> <li><span>09-11-25</span><a target="_blank">手牽手</a></li> <li><span>09-11-25</span><a target="_blank">初戀的少年家</a></li> </ul> </div> <div class="page"> <ul> <li><span>09-11-25</span><a target="_blank">��！停不住的愛人</a></li> <li><span>09-11-25</span><a target="_blank">網(wǎng)路</a></li> <li><span>09-11-25</span><a target="_blank">傾城之雨</a></li> <li><span>09-11-25</span><a target="_blank">往事2000</a></li> <li><span>09-11-25</span><a target="_blank">綠色恐怖分子</a></li> </ul> </div> <div class="page"> <ul> <li><span>09-11-25</span><a target="_blank">時(shí)光在慢慢消失</a></li> <li><span>09-11-25</span><a target="_blank">寧靜溫泉</a></li> <li><span>09-11-25</span><a target="_blank">變天著花</a></li> <li><span>09-11-25</span><a target="_blank">阿輝飼了一只狗</a></li> <li><span>09-11-25</span><a target="_blank">真的假的</a></li> <li><span>09-11-25</span><a target="_blank">南臺(tái)灣仔共</a></li> </ul> </div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

結(jié)構(gòu)層

要把一個(gè)目錄的內(nèi)容按頁展開，該怎么寫呢？也許是這樣，至少我就是這么寫的

<div id="menu">
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a>戀曲1980</a></li>
            <li><span>09-11-25</span><a>戀曲1990</a></li>
            <li><span>09-11-25</span><a>戀曲2000</a></li>
            <li><span>09-11-25</span><a>母親</a></li>
        </ul>
        <span class="tip">1/2頁拖拽翻頁</span>
    </div>
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a>伴侶</a></li>
            <li><span>09-11-25</span><a>思念</a></li>
            <li><span>09-11-25</span><a>童年</a></li>
            <li><span>09-11-25</span><a>牧童</a></li>
        </ul>
        <span class="tip">2/2頁拖拽翻頁</span>
    </div>
</div>

<ul> 是每一頁的列表，圖中的淺灰色色部分
<li> 是列表中的一條，圖中的珊瑚色部分
<span class="tip"> 是不應(yīng)該出現(xiàn)在xhtml 中的，應(yīng)該由 js 添加，它是每一頁下面的索引標(biāo)識(shí)，圖中的深灰色部分
<div class="page"> 是目錄中的頁，圖中的白色部分
<div id="menu"> 是包含了所有頁的目錄，圖中的亮藍(lán)色部分。當(dāng)然，如果頁面中除了這個(gè)效果外沒有其他東西的話，這個(gè)標(biāo)簽也可以不寫，那么所有 <div class="page"> 的父標(biāo)簽就是 <body>
或許你會(huì)說，目錄也應(yīng)該是 <ul>，所以應(yīng)該這么寫

<ul id="menu">
    <li class="page">
        <ul>
            <li><span>09-11-25</span><a>戀曲1980</a></li>
            <li><span>09-11-25</span><a>戀曲1990</a></li>
            <li><span>09-11-25</span><a>戀曲2000</a></li>
            <li><span>09-11-25</span><a>母親</a></li>
        </ul>
        <span class="tip">1/2頁拖拽翻頁</span>
    </li>
    <ul class="page">
        <ul>
            <li><span>09-11-25</span><a>伴侶</a></li>
            <li><span>09-11-25</span><a>思念</a></li>
            <li><span>09-11-25</span><a>童年</a></li>
            <li><span>09-11-25</span><a>牧童</a></li>
        </ul>
        <span class="tip">2/2頁拖拽翻頁</span>
    </li>
</li>

這樣確實(shí)更符合語意，不過問題馬上就來了

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁下一頁拖拽翻頁(ThrowPage)詳解 [2]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx