jQuery插件windowScroll用法代码实例详解

来源：华拓科技网

给大家分享的是一个使用jQuery插件windowScroll实现的特效

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">
 <p class="wrap" style="dispaly:block;">
 <p class="stageControl">
 <ul>
 <li>stage1</li>
 <li>stage2</li>
 <li>stage3</li>
 <li>stage4</li>
 <li>stage5</li>
 </ul>
 </p>
 <p class="stage stage1">
 <p class="pageControl">
 <ul>
 <li>page1</li>
 <li>page2</li>
 <li>page3</li>
 </ul>
 </p>
 <p class="page page1"></p>
 <p class="page page2"></p>
 <p class="page page3"></p> 
 </p>
 <p class="stage stage2"></p>
 <p class="stage stage3"></p>
 <p class="stage stage4"></p>
 <p class="stage stage5"></p>
 </p>
<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