jquery鼠标键盘按键满屏切换特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标键盘按键满屏切换特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script src='js/jquery.js'></script>
	<script src='js/jquery.mousewheel.min.js'></script>
	<script src='js/index.js'></script>
	<link rel="stylesheet" href="css/index.css">
	<title>jquery鼠标键盘按键满屏切换特效</title>
	<script>
      //参数设定
      var time=1000;//切换时间
          ntime=500//nav变换时间；
	</script>
</head>
<body>
	<!--nav-->
	<div id='nav'>我是导航(兼容ie6+,Firefox,chrome)</div>
	<div id='back'>top</div>
	<ul id="content">
		<li class="one"></li>
		<li class="two"></li>
		<li class="three"></li>
		<li class="four"></li>
		<li class="five"></li>
		<li class="six"></li>
	</ul>
</body>
</html>

JS代码(index.js):

$(function (){
	/*$('#test1').mousewheel(function(event,delta,deltaX,deltaY){
	// event:�¼� // delta:�������� ��ֵ���ϣ���ֵ����}
*/
var siz=0;
	var flag=true;
	flag1=true;
	hi=$(window).height();
	var le=$('#content li').length;
	$('html,body').mousewheel(function(event,delta,deltaX,deltaY){
	if (delta<0&&flag){
	flag=false;
	siz=$(window).scrollTop()>hi*(le-1)?hi*(le-1):hi+$(window).scrollTop();
	$('html,body').stop().animate({
	scrollTop:siz}
,time,function (){
	flag=true;
}
)}
else{
	if (flag){
	flag=false;
	siz=$(window).scrollTop()<hi*2?0:$(window).scrollTop()-hi;
	$('html,body').stop().animate({
	scrollTop:siz}
,time,function (){
	flag=true;
}
)}
}
return false;
}
)$('html,body').keydown(function (event){
	if(event.keyCode==40&&flag){
	flag=false;
	siz=$(window).scrollTop()>hi*(le-1)?hi*(le-1):hi+$(window).scrollTop();
	$('html,body').stop().animate({
	scrollTop:siz}
,time,function (){
	flag=true;
}
)}
else if(event.keyCode==38&&flag){
	if (flag){
	flag=false;
	siz=$(window).scrollTop()<hi*2?0:$(window).scrollTop()-hi;
	$('html,body').stop().animate({
	scrollTop:siz}
,time,function (){
	flag=true;
}
)}
}
return false;
}
)$(window).resize(function (){
	$(window).scrollTop((siz/hi)*$(window).height());
	siz=$(window).scrollTop();
	hi=$(window).height();
}
).scroll(function (){
	if ($(window).scrollTop()>0&&flag1){
	flag1=false;
	$('#back').show().hover(function (){
	$(this).css({
	background:'none'}
)}
,function (){
	$(this).css({
	background:'#ccc'}
)}
).stop().animate({
	borderRadius:'50%',opacity:1}
,1000).click(function (){
	$('html,body').stop().animate({
	scrollTop:0}
,1000,function (){
	flag1=true;
}
)}
);
}
else{
	if ($(window).scrollTop()==0){
	$('#back').stop().animate({
	opacity:0}
,500,function (){
	flag1=true;
	$('#back').css({
	borderRadius:0}
).hide();
}
)}
}
}
)}
)

CSS代码(index.css):

*{padding:0;margin:0;list-style:none;}
html,body{width:100%;height:100%;color:#fff;background:#ccc;}
html{background:url(about:black) fixed;}
#nav{height:50px;width:100%;text-align:center;font-size:30px;line-height:50px;border-bottom:1px solid gray;position:fixed;_position:absolute;z-index:999;_top:expression(eval(document.documentElement.scrollTop));}
#content{height:100%;width:100%;}
#content li{height:100%;width:100%;}
#content .one{background:#C94E50;}
#content .two{background:#FFA422;}
#content .three{background:#F05183;}
#content .four{background:#6CD5E2;}
#content .five{background:#43155E;}
#content .six{background:#1C232B;}
#back{color:#fff;font-size:30px;width:60px;height:60px;border:2px solid #ccc;background:#ccc;cursor:pointer;position:fixed;bottom:50px;right:60px;text-align:center;line-height:50px;display:none;_position:absolute;_right:50px;_top:expression(eval(document.documentElement.clientHeight-this.offsetHeight-50+document.documentElement.scrollTop));z-index:999;}

附件:下载该文件资源,减少时间成本(增值服务)