利用MWheel插件基于jQuery animate写的一个滚屏效果

JavaScript 2013-10-15 MWheel,jQuery,animate,动画,滚屏

前两天我写了一个MWheel插件,一些朋友用了表示很方便,于江水说可以做视差效果,谢谢大伙的宝贵意见。

今天闲着没事,花一个小时写了这个滚屏Demo,利用前两天我写的MWheel插件,结合jQuery的便利选择器以及我最喜欢的ainmate做一个滚屏效果。当然,滚屏效果很简单,无非就是for循环递增递减就能实现,算法简单,对于jQuery的animate等于杀鸡用牛刀。

先上DEMO给大家看看 : http://www.qttc.net/static/demo/gunping/

DEMO下载 :gunping.tar

HTML部分代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />	
		<title>滚屏效果 - 琼台博客</title>
		<style type="text/css">
			* { margin:0; padding:0; }
			.box { color:#FFF; text-align:center; font-size:10em; }
		</style>

		<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="MWheel.js"></script>
		<script type="text/javascript" src="page.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var element = document.getElementById("scroll"); 
				$(element).width($(document).width());
				$(element).height($(document).height());

				box(element);
			};	
		</script>
	</head>
	<body>
		<div id="scroll">
			<div class="box" style="background:red;" point="第一个">第一页</div>	
			<div class="box" style="background:black;" point="第二个">第二页</div>	
			<div class="box" style="background:blue;" point="第三个">第三页</div>	
			<div class="box" style="background:green;" point="最后一个">第四页</div>	
		</div>	
	</body>
</html>

page.js代码

(function(window, undefined){


	var num = 1, width, height, element, parent, speed, lock = false, pointElement = [], color = "#FFF", scrollElement;

	var margin = function(n){

		if(n > element.length){
			num = element.length;	
		}

		if(n < 1){
			num = 1;	
		}

		return (-1 * (height * (num-1))) + "px";
	};

	var scroll = function(marginTop){
		$(parent).animate({
			"margin-top" : marginTop	
		}, speed, function(){
			lock = false;
		});
		changePoint();
	};

	var changePoint = function(){
		var i;	

		for(i=0; i<pointElement.length; i++){
			if(i===num-1){
				pointElement[i].style.background = color;	
			}else{
				pointElement[i].style.background = "none";	
			}
		}
	};

	var createPoint = function(pe){

		var mr = 5,
			ico_width = 10,
			ico_height = 10,
			ee,
			i,
			cssText,
			e = document.createElement("div"),

			width = ico_width + mr*2 + 2,
			height = element.length * ( ico_height + 2 + mr*2 );

		e.style.cssText = [
			"width:" +width + "px",
			"height:" +height + "px",
			"position: absolute", 
			"right: 10px",
		      	"top: 50%",	
			"margin-top:" + (-1 * parseInt(height / 2, 10)) + "px"
		].join(";");


		for(i=0; i<element.length; i++){
			ee = document.createElement("div");
			cssText = [
				"width:" + ico_width + "px",
				"height:" + ico_height + "px",
				"margin:" + mr + "px",
				"cursor: pointer",
				"border-radius : " + (ico_width / 2) + "px",
				"border: 1px solid " + color
			];

			if(i===0){
				cssText.push("background:"+color);
			}

			ee.style.cssText = cssText.join(";");
			ee.title = element.get(i).getAttribute("point");

			ee.addEventListener("click", (function(i){
				return function(){	
					num = i+1;
					lock = true;
					scroll(margin(num));
				};
			})(i));

			e.appendChild(ee);
			pointElement.push(ee);
		}

		pe.appendChild(e);

	};

	var box = function(e){
		$("body").css({"overflow":"hidden"});
		element = $(e).css({"overflow":"hidden", "position":"relative"}).find(">.box");
		width = $(e).width();
		speed = height = $(e).height();

		element.each(function(){
			$(this).width(width);
			$(this).height(height);	
		});	

		parent = document.createElement("div");
		parent.style.cssText = [
			"width:" + width + "px",		
			"height:" + (height * element.length) + "px",
			"overflow: hidden",
		].join(";");
		e.appendChild(parent);	
		$(parent).append(element);

		MWheel(parent).addEventListener("down", function(event){
			if(!lock){
				lock = true;
				scroll(margin(--num));
			}
		}).addEventListener("up", function(event){	
			if(!lock){
				lock = true;	
				scroll(margin(++num));
			}
		});

		createPoint(e);
	};

	window.box = box;

})(window);

实现思路

1、首先是布局

既然是滚屏,那么我们首先能想到的模式大概就是一个div一个屏,div里面可以可以写每一屏的内容。这种div我这里简称为box,但box不能随便乱放,它得被一个专用的div包着,容易分辨,结果就有了这个页面布局:

<div id="scroll">
	<div class="box" style="background:red;" point="第一个">第一页</div>	
	<div class="box" style="background:black;" point="第二个">第二页</div>	
	<div class="box" style="background:blue;" point="第三个">第三页</div>	
	<div class="box" style="background:green;" point="最后一个">第四页</div>	
</div>	

2、样式

为了灵活,滚屏效果的大小以box被包着的父层大小为主,也就是id=scroll的div要是全屏大小,那滚屏效果就是全屏,要是大小为500*200,那么滚屏效果就是500*200。所以在index.html页面中,有这两句话(第三第四行)就是让scroll当作全屏滚动效果而设置的

window.onload = function(){
	var element = document.getElementById("scroll"); 
	$(element).width($(document).width());
	$(element).height($(document).height());

	box(element);
};

3、实现滚动

JavaScript只不过是一个动态算法,要实现动画效果必须要样式的机制的配合,能实现滚动效果的样式有很多种,我这次采用的是margin-top偏移的方式。首先在scroll里创建一个div,把class=box的div全部移入div内,div高度设置为scroll的高度 乘 box的个数,scroll设置overflow:hidden让它超出隐藏并隐藏滚动条。此时,样式的基础条件我已经设置好,要实现滚动只需修改scroll创建的div的margin-top的值即可实现,如:

<div id="scroll" style="width: 1600px; height: 809px; overflow: hidden; position: relative;">
	<div style="width: 1600px; height: 3236px; overflow: hidden; margin-top: -1618px;">
		<div class="box" style="background-color: red; width: 1600px; height: 809px; background-position: initial initial; background-repeat: initial initial;" point="第一个">第一页</div>
		<div class="box" style="background-color: black; width: 1600px; height: 809px; background-position: initial initial; background-repeat: initial initial;" point="第二个">第二页</div>
		<div class="box" style="background-color: blue; width: 1600px; height: 809px; background-position: initial initial; background-repeat: initial initial;" point="第三个">第三页</div>
		<div class="box" style="background-color: green; width: 1600px; height: 809px; background-position: initial initial; background-repeat: initial initial;" point="最后一个">第四页</div>
	</div>
</div>

4、滑轮滚动

此时,我们就差一个滚动机制了,可以定时滚动,鼠标滑轮事件滚动,点击小焦点切换滚动,这里我说说鼠标滑轮滚屏效果。借助我前两天写的鼠标滑轮插件MWheel轻松的实现滚动效果:

MWheel(parent).addEventListener("down", function(event){
	if(!lock){
		lock = true;
		scroll(margin(--num));
	}
}).addEventListener("up", function(event){	
	if(!lock){
		lock = true;	
		scroll(margin(++num));
	}
});

jQuery的animate效果:

var scroll = function(marginTop){
	$(parent).animate({
		"margin-top" : marginTop	
	}, speed, function(){
		lock = false;
	});
};

至此,一个滚屏效果做好了!

文字链接:《利用MWheel插件基于jQuery animate写的一个滚屏效果

文章地址:http://www.qttc.net/201310377.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3

  • 不考虑ie吗?
    2013-11-09 19:48:17 [ 跟帖 ]
    只是一个参考示例,确实没做浏览器兼容,代码很少,你可以让它强壮。谢谢!
    2013-11-10 22:50:18 [ 跟帖 ]
    1 #
  • 东西不错,继续努力!
    2013-10-16 13:41:30 [ 跟帖 ]
    2 #