JavaScript页面滚动时的效果源代码
JavaScript页面滚动时的效果源代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
body{margin:0 auto;padding:0;font-size:12px;font-family:"宋体";color:#000}
ul,li,dl,dt,dd,form,h1,h2,h3,h4,p,tr,td,th{margin:0px;padding:0px}
li {list-style-type:none}
img{border:0}
.clear{margin:0;padding:0;clear:both}
.clear hr{margin:0;padding:0;display:none}
a{color:#343331;text-decoration:none;outline:none}
a:hover{color:#df494b;text-decoration:none}
a:active{star:expression(this.onFocus=this.blur())}
:focus{outline:0}
.en{font-family:Arial,Helvetica,sans-serif;font-size:11px}
/*测试用*/
#text{position:fixed;top:100px;left:45%;color:#fff}
/*测试用*/
header{height:85px;overflow:hidden;position:fixed;background:#fff;width:100%;z-index:99999}
header .inner{width:1100px;overflow:hidden;height:85px;margin:0 auto}
section{width:100%;height:2000px}
.hgrap{height:85px}
.banner{height:660px;background:blue;width:100%}
.bannerbody{width:1100px;position:relative;height:660px;margin:auto;border-left:1px solid green}
.banner_font1{width:441px;height:69px;position:absolute;top:108px;left:0px;background:red}
</style>
</head>
<body>
<header>
<div class="inner">
</div>
</header>
<div id="text" style="width:50px;height:50px">1</div>
<section id="home">
<div class="hgrap"> </div>
<div class="banner">
<div class="bannerbody">
<div class="banner_font1" id="banner_font1"> </div>
</div>
</div>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
$(function(){
var $window = $(window);
var position = "top";
var banner_font1 = $("#banner_font1");
var banner_font1_left;
var posScroll = 0;
/************************************滚轮事件********************************************/
var ii = 0;
var initTop = 0;
$window.scroll(function() {
posScroll = $window.scrollTop(); //获取当前滚动高度
position = scrollPosition(posScroll,initTop); //判断滚动条滚动方向（上与下）
initTop = posScroll; //记录滚动
banner_font1_left = getNum(banner_font1.css("left")); //记录font1 left位置
if(position == "down")
{
banner_font1.stop(false,true).css("left", banner_font1_left - 5 + "px" );
}
else
{
banner_font1.stop(false,true).css("left", banner_font1_left + 5 + "px" );
}
//测试用显示数字
$("#text").html(posScroll);
});
//$("#text").html(posScroll);
});
//滚动条方向（return top or down）
function scrollPosition(posScroll,initTop)
{
var flag = "top";
if(posScroll > initTop){
flag = "down";
}
else{
flag = "top";
}
return flag;
}
function getNum(str)
{
str = str.replace("px","");
return parseInt(str);
}
</script>
</body>