您的当前位置：首页 jQuery插件windowScroll实现单屏滚动特效_jquery

jQuery插件windowScroll实现单屏滚动特效_jquery

来源：莱芜美食

回首望，曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展，人也不得不向前走。

参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。

代码如下:

HTML








window对象滚动插件







 
 
 
 stage1
 stage2
 stage3
 stage4
 stage5
 
 
 
 
 
 page1
 page2
 page3

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

详细的代码下载见https://github.com/codetker/myWindowScroll

以上所述就是本文的全部内容了，希望大家能够喜欢。