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;
}
}
}
<!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>
