QQ閱讀的翻頁效果

昨天晚上寫日誌的時候順便看了看QQ閱讀，發現這個翻頁效果支援滑鼠滾輪，今天在百般無聊的情況下，把這效果寫了一下。

JS:

function QQRead(){this.init.apply(this,arguments)};QQRead.prototype = {init:function(opts){var _this = this;var set = {prev : 'prev',next : 'next',slide : 'slide',page:'page',slideWidth:800}opts = opts || {};this.opt = this.extend(set,opts);this.count = 0;this.activePage = 0;this.sliding = false;this.prev = this.getId(this.opt.prev);this.next = this.getId(this.opt.next);this.slide = this.getId(this.opt.slide);this.page = this.getId(this.opt.page);this.pageNum = this.page.getElementsByTagName('li');this.len = this.slide.getElementsByTagName('li').length;this.pageNum[this.activePage].className = 'current';this.addEvent(this.prev,'click',function(){_this.go(-1)});this.addEvent(this.next,'click',function(){_this.go(1)});this.mousewheel();},mousewheel:function(e){var isFireFox = (function(){var x = navigator.userAgent.toLowerCase()return /firefox/.test(x) ? 'firefox': false;})();var _this = this;var mousewheel  = isFireFox ? 'DOMMouseScroll' : 'mousewheel';this.addEvent(document,mousewheel,function(e){e = e || window.event;var delta = e.wheelDelta ? e.wheelDelta /120 : -e.detail/3;_this.stopEvent(e) delta > 0 ? _this.go(-1) : _this.go(1);});},stopEvent:function(e){if(!e.stopPropagation){e.stopPropagation = function(){e.cancelBubble = true;}e.preventDefault = function(){e.returnValue = false;}}e.stopPropagation();e.preventDefault();},go:function(n){if(this.sliding) return;var nOld = this.count * this.opt.slideWidth;if(n<0){if(this.count ==0) return;this.count--;}else{if(this.count == this.len -1) return;this.count++;}var nNew = this.count * this.opt.slideWidth;this.scroll(n,nOld,nNew);},scroll:function(n,nOld,nNew){var _this = this;this.fx(nOld,nNew,function(x){_this.sliding = true;_this.slide.style.left = -x + 'px';},function(){_this.sliding = false;_this.pageNum[_this.activePage].className = '';_this.activePage = _this.count_this.pageNum[_this.count].className = 'current';})},fx:function (f,t,fn,callback){        var D=Date,d=+new D,e,T=480,ed=ed||D,F=function(x) {return (x /= 0.5) < 1 ? (0.5 * Math.pow(x, 2)) : (-0.5 * ((x -= 2) * x - 2))};        return e=setInterval(function (){            var z=Math.min(1,(new D-d)/T);            if(false===fn(+f+(t-f)*F(z),z)||z==1)ed(clearTimeout(e),callback());        },10)    },getId:function(el){return el = typeof el == 'string' ? document.getElementById(el) : el;},extend:function(baseObj,extendObj){for(var i in extendObj) baseObj[i] = extendObj;return baseObj;},addEvent:function(el,type,fn){if(typeof el.addEventListener != 'undefined'){el.addEventListener(type,fn,false);}else if(typeof el.attachEvent){el.attachEvent('on'+type,function(){fn.call(el,window.event);})}else{el['on'+type] = fn;}}}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">* { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px;}ul { list-style:none;}#QQRead { width:800px; margin:100px auto;}#QQRead_box { width:800px; height:300px; overflow:hidden; position:relative;}#QQRead_box ul { width:5600px;height:300px; position:absolute; top:0; left:0;}#QQRead_box ul li { width:800px; height:300px; float:left; background:#000; color:#fff; font-size:100px; line-height:300px; text-align:center;}#control { height:20px; line-height:20px; padding-left:300px; padding-top:10px;}#control a { display:inline; float:left; width:40px; text-align:center;  background:#333; color:#fff; text-decoration:none; font-weight:bold; margin-right:1px;}#control ul { float:left;}#control li { width:20px; height:20px; float:left; text-align:center; margin-right:1px; display:inline;}#control li.current { background:#333; color:#fff;}</style></head><body><div id="QQRead"><div id="QQRead_box">    <ul id="slide">        <li>page1</li>            <li>page2</li>            <li>page3</li>            <li>page4</li>            <li>page5</li>            <li>page6</li>            <li>page7</li>        </ul>    </div>    <div id="control">    <a href="#" id="prev">prev</a>        <ul id="page">        <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>            <li>6</li>            <li>7</li>        </ul>        <a href="#" id="next">next</a>    </div></div><script type="text/javascript" src="QQRead.js"></script><script type="text/javascript">new QQRead()</script></body></html>