QQ阅读的翻页效果

最新推荐文章于 2020-11-17 18:22:14 发布

weixin_30319097

最新推荐文章于 2020-11-17 18:22:14 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/sky000/archive/2010/11/28/1890154.html

昨天晚上写日志的时候顺便看了看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>

转载于:https://www.cnblogs.com/sky000/archive/2010/11/28/1890154.html