求诸位大大帮忙看看是什么原因-JavaSript-爱易网页

求诸位大大帮忙看看是什么原因

日期：2014-05-16　浏览次数：20339 次

求各位大大帮忙看看是什么原因！
本人最近需要弄一个关于页面滚动时的效果，但一直弄不明白



<!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">&nbsp;</div>

    <div class="banner">

    	<div class="bannerbody">

            <div class="banner_font1" id="banner_font1">&nbsp;</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",

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

求诸位大大帮忙看看是什么原因

相关资料更多>

推荐阅读更多>