jQuery插件windowScroll实现单屏滚动特效
回首望，曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展，人也不得不向前走。
参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。
代码如下:
HTML
<!doctype html>
<html>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta content=\"\" name=\"keywords\" />
<meta content=\"\" name=\"description\" />
<meta name=\"author\" content=\"codetker\" />
<head>
<title>window对象滚动插件</title>
<link href=\"style/reset.css\" rel=\"stylesheet\" type=\"text/css\">
<link href=\"style/style.css\" rel=\"stylesheet\" type=\"text/css\">
<script type=\"text/javascript\" src=\"js/jquery-1.9.1.min.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.codetker.windowScroll.js\"></script>
</head>
<body scroll=\"no\">
<div class=\"wrap\" style=\"dispaly:block;\">
<div class=\"stageControl\">
<ul>
<li>stage1</li>
<li>stage2</li>
<li>stage3</li>
<li>stage4</li>
<li>stage5</li>
</ul>
</div>
<div class=\"stage stage1\">
<div class=\"pageControl\">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
<div class=\"page page1\"></div>
<div class=\"page page2\"></div>
<div class=\"page page3\"></div>
</div>
<div class=\"stage stage2\"></div>
<div class=\"stage stage3\"></div>
<div class=\"stage stage4\"></div>
<div class=\"stage stage5\"></div>
</div>
<script type=\"text/javascript\">
$(document).ready(function(){
$(\".wrap\").windowScroll({
\'choose\' : 0,
\'verticalSpeed\' : 2, //控制垂直滚动速度
\'horizontalSpeed\' : 1,
\'objControlUl\': \'.wrap .stageControl\'
});
$(\".stage1\").windowScroll({
\'choose\': 1,
\'verticalSpeed\' : 1,
\'horizontalSpeed\' : 1,//控制水平滚动速度
\'objControlUl\': \'.stage1 .pageControl\'
});
});
</script>
</body>
</html>
CSS
@charset \"utf-8\";
/* CSS Document */
body{
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow: hidden;;
}
.wrap{
font-family:\"微软雅黑\",\"宋体\", Times, \"Times New Roman\", serif;
font-size:14px;
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow:hidden;
}
.stage,.page{
width: 100%;
height: 100%;
}
.stage1{
background-color:red;
}
.stage2{
background-color:#fff;
}
.stage3{
background-color:yellow;
}
.stage4{
background-color:green;
}
.stage5{
background-color:blue;
}
.page{
float: left;
}
.page2{
background-color: #666;
}
.page3{
background-color: #ddd;
}
.stageControl{
position: fixed;
}
.stageControl ul li{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.stageControl ul li:hover{
color: blue;
}
.pageControl{
position: fixed;
left: 200px;
}
.pageControl ul li{
float: left;
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.pageControl ul li:hover{
color: blue;
}
JavaScript
/*
* windowScroll 0.1
* window滚动插件，上下左右，可选择是否回弹。参考搜狗欢迎页面
* 兼容IE,FF,Chrome等常见浏览器
* 借鉴搜狗4.2版http://ie.sogou.com/features4.2.html
*/
;(function($,window,document,undefined){
//定义构造函数
var WindowObj=function(ele,opt){
this.$element=ele; //最外层对象
this.defaults={
\'choose\' : 0,//默认为上下
\'verticalSpeed\' : 1,
\'horizontalSpeed\' : 1,
\'objControlUl\': null
},
this.options=$.extend({},this.defaults,opt );
//阻止默认行为和冒泡,这里可以定义多个方法都要用到的函数
this.stopDefaultAndBubble=function(e){
e=e||window.event;
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue=false;
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble=true;
}
this.setSize=function(ele){
$(ele).css({
\'width\':$(window).outerWidth()+\'px\'
});
//自动判断元素是否存在，对undefined赋css属性无意义
$(ele).children(\'.stage\').css({
\'width\':$(window).outerWidth()+\'px\',
\'height\':$(window).outerHeight()+\'px\'
});
$(ele).children(\'.page\').css({
\'width\':$(window).outerWidth()+\'px\',
\'height\':$(window).outerHeight()+\'px\'
});
}
}
//给构造函数添加方法
WindowObj.prototype={
//上下滚动的方法
verticalMove:function(){
var obj=this.$element; //最外层对象
var speed=this.options.verticalSpeed;
var objControl=this.options.objControlUl;//控制按钮
var windowHeight=$(window).height();
var list=$(obj).children(\'.stage\');
var listMax=$(list).length;
var is_chrome=navigator.userAgent.toLowerCase().indexOf(\'chrome\')>-1;
if(is_chrome){
//判断webkit内核，供scrollTop兼容性使用
windowobject=\'body\';
}else{
//支持IE和FF
windowobject=\'html\';
}
var stop=0;
//均设置为windows大小
this.setSize(obj);
//得到当前的垂直位置
var stageIndex;
function getIndex(){
stageIndex=Math.round($(window).scrollTop()/windowHeight);
}
//绑定键盘上下按键事件
$(document).keydown(function(event) {
/* 绑定keycode38，即向上按钮 */
if (event.keyCode==38) {
getIndex();
setTimeout(function(){
scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码
},100);
}else if (event.keyCode==40) {//绑定40，即向下按钮
getIndex();
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码
},100);
}
});
//绑定滑轮功能的函数
function handle(delta){
getIndex();
if (delta<0) {
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码
},100);
}else{
setTimeout(function(){
scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码
},100);
}
}
//判断滑轮，解决兼容性
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail;
}
if (delta)
handle(delta); //调用执行函数
}
//注册事件
if (window.addEventListener) {
window.addEventListener(\'DOMMouseScroll\', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
//绑定鼠标滚轮事件
$(document).bind(\'mousedown\', function(event) {
if (e.which==2) {//which=2代表鼠标滚轮,即为中键
this.stopDefaultAndBubble(e);
//bugfix 搜狗浏览器的ie内核只有在定时器触发这个函数才生效
setTimeout(function(){
this.stopDefaultAndBubble(e);
},10);
}
});
//如果有ul li控制按钮
if (objControl!=null) {
$(objControl).delegate(\'li\', \'click\', function() {
stageIndex=$(this).index();
setTimeout(function(){
scrollStage(windowobject,stageIndex,0);
},100);
});
}
function scrollStage(obj,stIndex,dir){//如果用scrollStage=function来指定的话没有声明提前，然后就会找不到这个函数了
//obj为操作滚动的对象
//stIndex为点击调用时应该滚动到的页面页码，按键和滚轮调用时默认为1(传入0)
//dir传入滚动时的方向，0代表不滚动，1代表向上，-1代表向下
var sIndex=stIndex;//!(dir)则stageIndex为要到的页码，否则为当前页码
var windowobject=obj;
var direction=0||dir; //接收参数封装,没有传入时暂时认为为0
var target=windowHeight*sIndex; //目标页面距离文档顶部距离
if ( !$(windowobject).is(\':animated\') ) {//当没有在滚动时
if(!direction){ ////响应guider,此时stageIndex为目标页面页码
if ($(window).scrollTop() > target) { //内容下移，窗口上移,上方出现弹痕
direction=-1;
$(windowobject).animate({
\"scrollTop\": target +\"px\"
},1000*speed,function(){
crash_bottom(1,target,20,150); //调用撞击函数,先撞顶部,target变成当前页面了
});
}else if($(window).scrollTop() == windowHeight*sIndex){ //当前页面时
direction=0;
crash_bottom(1, target ,20,150); //模拟撞底部
}else{
direction=1;
$(windowobject).animate({
\"scrollTop\": target +\"px\"
},1000*speed,function(){
crash(1,target,20,150); //调用撞击函数,先撞底部
});
}
}else{//响应鼠标滚轮和键盘上下，sindex为当前页面
if(direction==1){
if(sIndex==0){
crash(1,target,20,150);
}else{ //往上翻
sIndex-=1;
$(windowobject).animate({
\"scrollTop\":windowHeight*sIndex+\"px\"
},1000*speed,function(){
crash_bottom(1,windowHeight*sIndex,20,150); //调用撞击函数,往下翻内容往上，先撞顶部
}
);
}
}else{
if(sIndex==listMax){
crash_bottom(1,target,20,150);
}else{ //往下翻
sIndex+=1;
$(windowobject).animate({
\"scrollTop\":windowHeight*sIndex+\"px\"
},1000*speed,function(){
crash(1,windowHeight*sIndex,20,150); //调用撞击函数,往上翻内容往下，先撞底部
});
}
}
}
}
}
//撞击函数
function crash_bottom(direction,termin,distant,time){
if (!stop) {
var scrollTop=$(window).scrollTop();
if (direction==1) {
direction=0;
$(windowobject).animate({\"scrollTop\":\"+=\"+distant+\"px\"},time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({\"scrollTop\":termin+\"px\"},time,function(){
stop=0;
});
}
});
}else if (direction==0) {
direction=1;
$(windowobject).animate({\"scrollTop\":termin+\"px\"},time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({\"scrollTop\":termin+\"px\"},time,function(){
stop=0;
});
}
});
}
}
}
function crash(direction,termin,distant,time){
if (!stop) {
var scrollTop=$(window).scrollTop();
if (direction==1) {
direction=0;
$(windowobject).animate({\"scrollTop\":\"-=\"+distant+\"px\"},time,function(){
crash(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({\"scrollTop\":termin+\"px\"},time,function(){
stop=0;
});
}
});
}else if (direction==0) {
direction=1;
$(windowobject).animate({\"scrollTop\":termin+\"px\"},time,function(){
crash(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({\"scrollTop\":termin+\"px\"},time,function(){
stop=0;
});
}
});
}
}
}
},
//左右滚动的方法
horizontalMove:function(){
var obj=this.$element; //最外层对象
var speed=this.options.horizontalSpeed;
var objControl=this.options.objControlUl;//控制按钮
var windowWidth=$(window).width();
var list=$(obj).children(\'.page\');
var listMax=$(list).length;
var is_chrome=navigator.userAgent.toLowerCase().indexOf(\'chrome\')>-1;
if(is_chrome){
//判断webkit内核，供scrollTop兼容性使用
windowobject=\'body\';
}else{
//支持IE和FF
windowobject=\'html\';
}
var stop=0;
//均设置为windows大小
this.setSize(obj);
$(obj).css({\'width\':windowWidth*listMax+\'px\'});
var pageIndex; //当前页面页码(负数)
function getPageIndex(){
pageIndex=Math.round(parseInt($(obj).css(\"margin-left\")) / windowWidth);
}
//绑定键盘左右按键事件
$(document).keydown(function(event){
//判断event.keyCode为39（即向右按钮）
if (event.keyCode==39) {
getPageIndex();
scrollPage($(obj),pageIndex,-1);
}
//判断event.keyCode为37（即向左按钮
else if (event.keyCode==37) {
getPageIndex();
scrollPage($(obj),pageIndex,1);
}
});
//如果有ul li控制按钮
if (objControl!=null) {
$(objControl).delegate(\'li\', \'click\', function() {
pageIndex=$(this).index();
setTimeout(function(){
scrollPage(obj,pageIndex,0);
},100);
});
}
function scrollPage(obje,pIndex,dir){
var windowobject=obje;
var direction=0||dir;
var pageIndex=pIndex;
var dist=Math.round(parseInt($(obj).css(\"margin-left\"))); //当前页距离左边的margin(负值)
var aim=pageIndex*windowWidth*(-1);
if (!$(windowobject).is(\":animated\")) {
if(!direction){ //响应nav
if (dist != aim) { //此时pageIndex为yearID.非负值
$(windowobject).animate({\"margin-left\": aim + \"px\"},
1000*speed);
}else{
direction=0;
$(windowobject).animate({\"margin-left\":\"+=\"+\"50px\"},500).animate({\"margin-left\":\"-=\"+\"100px\"},500).animate({\"margin-left\":\"+=\"+\"50px\"},500);
}
}else{ //响应键盘左右键
if(direction==1){ //pageIndex为负值
if(pageIndex==0){
$(windowobject).animate({\"margin-left\":\"+=\"+\"50px\"},500).animate({\"margin-left\":\"-=\"+\"100px\"},500).animate({\"margin-left\":\"+=\"+\"50px\"},500);
}else{
pageIndex+=1; //显示左边内容，左键
$(windowobject).animate({\"margin-left\":\"+=\" + windowWidth + \"px\"},
1000*speed);
}
}else{
if(pageIndex== ((-1)*(listMax-1))){
$(windowobject).animate({\"margin-left\":\"-=\"+\"50px\"},500).animate({\"margin-left\":\"+=\"+\"100px\"},500).animate({\"margin-left\":\"-=\"+\"50px\"},500);
}else{
pageIndex-=1;
$(windowobject).animate({\"margin-left\":\"-=\" + windowWidth + \"px\"},
1000*speed);
}
}
}
}
}
}
}
//在插件中使用windowObj对象的方法，0为vertical，1为horizontal
$.fn.windowScroll=function(options){
//创建实体
var windowObj=new WindowObj(this,options);
//根据选择调用方法
if (windowObj.options.choose==0) {
return windowObj.verticalMove();
}else if(windowObj.options.choose==1){
return windowObj.horizontalMove();
}else{//2之后的留扩展吧
//add some functions
}
}
})(jQuery,window,document);
详细的代码下载见https://github.com/codetker/myWindowScroll
以上所述就是本文的全部内容了，希望大家能够喜欢。
本文地址：https://www.stayed.cn/item/17777
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)