jQuery 整屏滚动插件 (hCoder原创),兼容各类浏览器
发布时间 : 2015-05-26  浏览 : 3206 次

jQuery 整屏滚动插件 (hCoder原创),兼容各类浏览器

演示地址:

http://static.hcoder.net/demo/hcFullScreen/index.html

核心js文件下载:

http://pan.baidu.com/s/1sjPuWgP

相关代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>整屏滚动</title>
<style>
*{margin:0px; padding:0px; font-size:14px; font-family:"Microsoft yahei"; color:#333;}
body{background-color:#FFFFFF;}
a{text-decoration:none; color:#333333;}
a:hover{text-decoration:underline;}
img{border:none; overflow:hidden;}
ul{list-style:none;}
.FL{float:left !important;}
.FR{float:right !important;}
#fullScreen{width:100%; height:200px; margin:0 auto; overflow:hidden;}
#fullScreen li{width:100%; color:#FFFFFF; font-size:38px; text-align:center;}
#fullScreen li *{color:#FFFFFF; font-size:38px; text-align:center; padding:0px 80px;}
#fullScreenPoint{width:28px; height:auto; position:fixed; z-index:9; right:10px; top:20px; padding:18px 0px; background:#6AC0BD; border-radius:28px;}
#fullScreenPoint div{width:15px; height:15px; margin:0 auto; border-radius:15px; background:#4A4A4A; margin-top:10px;}
.fullScreenPointSed{background:#E55001 !important;}
</style>
</head>
<body>
<div id="fullScreen">
	<ul>
		<li style="background:#69B076;">
			jQuery整屏滚动插件(请滚动鼠标滑轮体验)
		</li>
		<li style="background:#466F85;">
			修养的花儿在寂静中开过去了,成功的果子便要在光明里结实。 —— 冰心
		</li>
		<li style="background:#FF9D92;">
			<div>
				在任何一个成功的后面都有着十五年到二十年的生活经验,都有着丰富的生活经验,要是没有这些经验,任何才思敏捷恐怕也不会有,而且在这里,恐怕任何天才也都无济于事。 —— 巴甫连柯
			</div>
		</li>
		<li style="background:#ED8B4A;">
			只有登上山顶,才能看到那边的风光。
		</li>
	</ul>
</div>
<div id="fullScreenPoint"></div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="hcFullScreen.js"></script>
<script type="text/javascript">
function hcFullSreenFunc(id){
	if(id == 2){
		$('#fullScreen li').eq(2).find('div').hide();
		$('#fullScreen li').eq(2).find('div').fadeIn(800);
	}
}
</script>
<script type="text/javascript">
$(function(){
	$('#fullScreen').hcFullScreen('fullScreenPoint', 'fullScreenPointSed');
});
</script>
</body>
</html>


课程介绍:
hcoder为您打造 jQuery 整屏滚动插件 (hCoder原创),兼容各类浏览器。本教程将详细讲解插件的使用和改造。
课程章节
教程更新
More...