Javascript使用三大家族和事件来DIY动画效果相关笔记（三）
1.scroll家族
◆scrollWidth表示元素的内容宽度加上padding，不包括border和margin，scrollHeight表示元素的内容高度和padding，当内容小于盒子定义的高度时scrollHeight就是盒子定义的高度加上padding，主要是以元素内容的高度和padding来决定大小的，注意在IE7及以下scrollHeight只有元素的内容的高度和padding来决定大小，就算内容的高度小于盒子定义的高度时scrollHeight也还是盒子内容的高度加上padding。
◆scrollTop表示纵向移动滚动条时上边被卷去的距离，一般是用于body，document.body.scrollTop,但是兼容性不是很好，scrollLeft表示横向移动滚动条时左边被卷去的距离，一般是用于body，document.body,scrollLeft,但是兼容性不是很好。
◆滚动事件是onscroll，只要滚动1px就会触发这个事件。
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll家族</title>
<style type="text/css">
body {
width: 5000px;
height: 5000px;
}
div {
width: 200px;
height: 200px;
padding:20px;
border: 10px solid #f09;
}
</style>
</head>
<body>
<div id="box">
九尺龙泉万卷书，上天生我意何如。
不能报国平天下，枉为男儿大丈夫。
</div>
<script>
////获取div的scrollWidth 和 scrollHeight
//scrollWidth与offsetWidth不同，
// scrollWidth获取的是内容的宽度加上padding，
// 当内容的宽度小于盒子定义的宽度时，scrollWidth获取到的是盒子定义的宽度加上padding
console.log(box.scrollWidth);
//scrollHeight与offsetHeight不同
//scrollHeight获取的是内容的高度加上padding，
//当内容的高度小于盒子定义的高度是，scrollHeight获取到的是盒子定义的高度加上padding
//当内容的高度大于盒子定义的高度时（也就是内容被挤出来盒子）,
// scrollHeight获取到的是盒子实际内容的高度加上padding
//注意：在IE7及以下时，scrollHeight获取到的永远都是盒子实际内容的高度加上padding
console.log(box.scrollHeight);
////获取页面scrollLeft和scrollTop
window.onscroll=function(){
/* 在声明了DTD(<!DOCTYPE html>或者其它<html>标签之上的标记)之后 任何浏览器使用
document.body.scrollLeft 和document.body.scrollTop 返回值为0
只有在没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时才能用
document.body.scrollLeft 和document.body.scrollTop
但是在IE9及以下时无论有没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）
document.body.scrollLeft/scrollTop 返回值也都为0*/
// document.title=document.body.scrollLeft+" "+document.body.scrollTop;
/*
* 在声明了DTD(<!DOCTYPE html>获取其它<html>标签之上的标记)之后 在任何浏览器使用
* document.documentElement.scrollLeft 和document.documentElement.scrollTop都会返回具体的值
*在没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时
* 只有IE浏览器能够获取到具体的值，其它浏览器的返回值都是0
* */
// document.title=document.documentElement.scrollLeft+" "+document.documentElement.scrollTop;
/**
* 无论有没有声明DTD，在IE9及以上和其它主流浏览器上，都可以使
用另一种方式来获取被卷去的距离，也就是window.pageYOffset
和window.pageXOffset,这两个一个是获取纵向被卷去的距离和
横向被卷去的距离，window.pageYOffset在IE678中返回值是
undefined
*/
document.title=window.pageXOffset+" "+window.pageYOffset;
}
</script>
</body>
</html>
2.scroll家族的兼容性问题及解决
◆DTD表示文档约束，就是浏览器需要遵循的一些新的规则，浏览器遵守了新的规则之后就可能会出现之前的代码出现兼容性的问题，但是浏览器遵守了新的规则之后，就会出现兼容性更好的代码，如声明了DTD之后document.body.scrollTop在任何浏览器都不能用了包括IE9及以下，因为在新的规则中不允许使用document.body.scrollTop获取滚动时上边被卷去的距离，只能够使用document.documentElement.scrollTop。
◆在html中有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时 document.body.scrollTop就没有效果了，在任何浏览器都没有效果，但是在没有声明DTD时，document.body.scrollTop除了IE9及其以下不能用，其它浏览器都可以用，当然也会在一些类似IE9及以下的老版本的浏览器不能用。
◆在html中有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）时 在任何浏览器使用document.documentElement.scrollLeft 和document.documentElement.scrollTop都会返回具体的值（包括IE9及其以下），但是在没有声明DTD时，只有IE（任何版本）浏览器能够获取到具体的值，其它浏览器的返回值都是0，所以声明了DTD的重要性一览无余。
◆无论有没有声明DTD，在IE9及以上和其它主流浏览器上，都可以使用另一种方式来获取被卷去的距离，也就是window.pageYOffset和window.pageXOffset,这两个一个是获取纵向被卷去的距离和横向被卷去的距离，window.pageYOffset在IE678中返回值是undefined，最好的兼容写法
window.pageYOffset||document.body.scrollTop ||document.documentElement.scrollTop◆在IE9及其版本之下的或者类似的浏览器，无论有没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记），document.body.scrollTop和document.body.scrollLeft都只会返回0，但是无论有没有声明了DTD（<!DOCTYPE html>或者其它<html>标签之上的标记），document.documentElement.scrollLeft和document.documentElement.scrollTop 在IE任何版本的浏览器上都能够获取具体的值，当然有声明DTD时这两个可以获取到所有浏览器的具体的值，于是兼容性写法是：
document.body.scrollLeft ||document.documentElement.scrollLeftdocument.body.scrollLeft +document.documentElement.scrollLeftwindow.pageYOffset||document.body.scrollTop ||document.documentElement.scrollTop//最好◆Html基本结构访问方法，获取title标签的方式：document.title；获取head标签的方式：document.head；获取body标签的方式：document.body；获取html标签的方式：document.documentElement。所以上面的document.body.scrollTop和document.documentElement.scrollTop，其实就是不同浏览器认为是body在滚动还是html在滚动而导致的兼容性问题出现的原因，后来一致决定了window.pageXOffset，不是body在动也不是html在动，是页面在动，但是由于浏览器要向下兼容，所以以前的属性还是在用，新的也在更新。
◆scroll的兼容性封装：判断是否声明的DTD，BackCompat表示未声明，CSS1Compat表示已经声明，判断的方式，document.compatMode==="BackCompat"注意大小写
function scroll() {
/*
*注意事项：
*1.无论有没有声明DTD 在IE9及以上的所有浏览器都支持window.pageXOffset和window.pageYOffset
* 但是在IE9以下不支持，并且会返回undefined。
*2.在没有声明DTD时 在IE9以上的所有浏览器都支持document.body.scrollLeft和document.body.scrollTop
* 在声明了DTD时 所有浏览器都不支持，并且会返回0
*3.在声明了DTD时 所有浏览器都支持document.documentElement.scrollLeft和document.documentElement.scrollTop
* 无论有没有声明DTD IE浏览器都支持,没有声明DTD 其它除了IE浏览器外都不支持，并且会返回0。
* */
//判断是否不为undefined
if (window.pageXOffset !== "undefined" || window.pageYOffset !== "undefined") {
//返回一个关于scroll的对象回去
return {scollLeft: window.pageXOffset, scollTop: window.pageYOffset};
}
else if (document.compatMode === "BackCompa") {//是否没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）
//判断是否是IE浏览器
if (document.documentElement.scrollLeft || document.documentElement.scrollTop) {
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
else {//如果不是IE浏览器
return {scollLeft: document.body.scrollLeft, scollTop: document.body.scrollTop};
}
}
else {//如果声明了DTD
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
// //精简版封装只需要返回 这个就是上面判断的精简 效果一样
// return {
// scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
// scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
// }
}3.使用缓速动画加scroll来DIY：固定导航栏+缓速广告跟随+返回顶部
◆固定导航栏：创建新元素比克隆元素要慢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动时固定导航栏</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
img {
vertical-align: top;
}
#main {
width: 1423px;
margin-top: 10px;
}
#main img {
display: block;
width: 1001px;
margin: 0 auto;
}
.fix {
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="top"><img src="images/top.png" alt=""></div>
<div id="nav"><img src="images/nav.png" alt=""></div>
<div id="main"><img src="images/main.png" alt=""></div>
</body>
<script type="text/javascript" src="6.封装的兼容性scroll.js"></script>
<script>
//需求：当滚动条移动，
// 超过了页面头部的距离后，
// 就让导航栏固定定位，
// 如果没有超过页面头部的距离，
// 就还是原来的样子
//思路：当被卷去的距离大于头部的距离时，就给导航栏添加固定的样式，
// 如果再卷回来的话，就还原导航栏原来的样式。
//步骤：
// 1.获取事件源及相关元素对象
// 2.绑定事件
// 3.书写事件驱动程序
// 1.获取事件源及相关元素对象
var top1 = document.getElementById("top");
var nav = document.getElementById("nav");
var main = document.getElementById("main");
var div = null;//占位置的div
// 2.绑定事件
window.onscroll = function () {
// 3.书写事件驱动程序
//判断卷去的距离是否超过了头部的实际高度
if (scroll().scollTop > top1.offsetHeight) {
//添加固定的类样式
nav.className = "fix";
//固定定位不占位置，下面的盒子就会跑上来
//解决办法一：创建一个div占位置 //创建元素比克隆元素要慢 因为页面抖动了
// if (!div) {//如果盒子不存在才去创建
// div = document.createElement("div");
// div.style.height = nav.offsetHeight + "px";
// div.style.width = nav.offsetWidth + "px";
// main.parentNode.insertBefore(div, main);
// }
// 解决办法二：直接克隆一个让他不可见
if (!div) {//如果盒子不存在才去克隆
div = nav.cloneNode(true);
div.className = div.className.replace("fix", "");
div.style.visibility = "none";
main.parentNode.insertBefore(div, main);
}
} else {
if (div) {//如果盒子存在就移除
//如果这个占位置的元素存在的话就移除
main.parentNode.removeChild(div);
div = null;
nav.className = nav.className.replace("fix", "");
}
}
}
</script>
</html>◆缓速广告跟随：
◇js
function scroll() {
/*
*注意事项：
*1.无论有没有声明DTD 在IE9及以上的所有浏览器都支持window.pageXOffset和window.pageYOffset
* 但是在IE9以下不支持，并且会返回undefined。
*2.在没有声明DTD时 在IE9以上的所有浏览器都支持document.body.scrollLeft和document.body.scrollTop
* 在声明了DTD时 所有浏览器都不支持，并且会返回0
*3.在声明了DTD时 所有浏览器都支持document.documentElement.scrollLeft和document.documentElement.scrollTop
* 无论有没有声明DTD IE浏览器都支持,没有声明DTD 其它除了IE浏览器外都不支持，并且会返回0。
* */
////判断是否不为undefined
//if (window.pageXOffset !== "undefined" || window.pageYOffset !== "undefined") {
// //返回一个关于scroll的对象回去
// return {scollLeft: window.pageXOffset, scollTop: window.pageYOffset};
//}
//else if (document.compatMode === "BackCompa") {//是否没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）
// //判断是否是IE浏览器
// if (document.documentElement.scrollLeft || document.documentElement.scrollTop) {
// return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
// }
// else {//如果不是IE浏览器
// return {scollLeft: document.body.scrollLeft, scollTop: document.body.scrollTop};
// }
//}
//else {//如果声明了DTD
// return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
//}
//精简版封装只需要返回 这个就是上面判断的精简 效果一样
return {
scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
}
}
//缓速动画
function animate(element, target) {
//绑定计时器之前先清除定时器
clearInterval(element.timer);
element.timer = setInterval(function () {
//注意：this.offsetTop最终获取的是number类型的值，并且它还会对小数进行四舍五入，
//如果this.style.Top中有小数，并且还低于0.5，那么就会导致offsetTop每次获取到的值，
//都是一样，然后就会造成 盒子不懂，定时器不停的现象发生，所以缓速动画时要记得给步长取整
// 如果步长>0就向上取整，避免步长小于0.5时出现bug,
// 如果步长<0，就向下取整，避免步长下雨-0.5时出现bug。
//每次移动的步长
element.spend = (target - element.offsetTop) / 10
//对步长进行取整，避免offsetTop底层的四舍五入的影响
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
// 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetTop) <= Math.abs(element.spend)) {
element.style.top = target + "px";
console.log(element.style.top)
clearInterval(element.timer);
return;
}
//重新设置距离左边的位置
element.style.top = element.offsetTop + element.spend + "px";
console.log(element.style.top)
}, 10);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动时两侧广告缓速的跟随</title>
<style type="text/css">
div {
width: 1210px;
margin:80px auto;
font:600 30px/45px "simsun";
color:#f09;
text-align: center;
}
.img1 {
position: absolute;
left:25px;
top:80px;
}
.img2 {
position: absolute;
right:25px;
top:150px;
}
</style>
<script type="text/javascript" src="7.封装的缓速动画加兼容性scroll.js"></script>
<script>
//需求：当移动滚动条时，两侧的广告也会跟着滚动，广告滚动的动画效果是缓速
//思路：每一个次滚动，两侧的广告也会随着移动距离，移动的方式是缓慢移动 先快后慢
//步骤：
//1. 获取事件源及相关元素对象
//2. 绑定事件
//3. 书写事件驱动程序
window.onload=function(){
//1. 获取事件源及相关元素对象
var imgs=document.getElementsByTagName("img");
var imgTop=imgs[0].offsetTop;
//先执行一次这个动画
animate(imgs[0],scroll().scollTop+imgTop);
animate(imgs[1],scroll().scollTop+imgTop);
//2. 绑定事件
window.onscroll=function(){
//3. 书写事件驱动程序
animate(imgs[0],scroll().scollTop+imgTop);
animate(imgs[1],scroll().scollTop+imgTop);
}
}
</script>
</head>
<body>
<img class="img1" src="images/aside.jpg" alt="">
<img class="img2" src="images/aside.jpg" alt="">
<div>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部的小火箭头（缓速动画）</title>
<style type="text/css">
div {
width: 1210px;
margin: 80px auto;
font: 600 30px/45px "simsun";
color: #f09;
text-align: center;
}
#top {
position: fixed;
bottom: 150px;
right: 50px;
border: 2px solid #f09;
cursor: pointer;
}
</style>
<script>
//需求：当移动滚动条时，只要被卷去的距离大于250px,就显示小火箭。
// 当点击小火箭时，页面就慢慢向上移动，知道移动到顶部
//思路：当卷曲的距离大于250px,就设置小火箭的diplay属性为black，反之就设置为none
// 当点击小火箭时，使用window.scrllTo(x,y)方法，让页面缓慢移动到最上面
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
window.onload = function () {
//1.获取事件源及相关元素对象
var ｔｏｐ = document.getElementById("top");
//被卷去的距离大于250px,就显示小火箭
if (scroll().top > 500) {
ｔｏｐ.style.display = "block";
} else {
ｔｏｐ.style.display = "none";
}
//2.绑定事件
window.onscroll = function () {
//3.书写事件驱动程序
//设置被卷去的距离 也就是当前所在的位置
leader = scroll().top;
//被卷去的距离大于250px,就显示小火箭
if (scroll().top > 250) {
ｔｏｐ.style.display = "block";
} else {
ｔｏｐ.style.display = "none";
}
}
var target = 0;//指定的位置
var leader = 0;//当前位置
ｔｏｐ.onclick = function () {
//3.书写事件驱动程序
//使用定时器之前先清除定时器
clearInterval(ｔｏｐ.timer);
//设置定时器
ｔｏｐ.timer = setInterval(function () {
//计算步长
ｔｏｐ.speed = (target - leader) / 10;
//二次计算步长 防止 水永远取不尽 定时器永远不停
ｔｏｐ.spend = ｔｏｐ.spend > 0 ? Math.ceil(ｔｏｐ.spend) : Math.floor(ｔｏｐ.spend);
//距离是否只剩一步之遥
if (Math.abs(target - leader) <= Math.abs(ｔｏｐ.speed)) {
window.scrollTo(0, target);
clearInterval(ｔｏｐ.timer);
return;
}
//设置移动的动画
window.scrollTo(0, leader + ｔｏｐ.speed);
}, 30);
}
}
//兼容性 scroll 封装
function scroll() {
return {
top: window.pageYOffset || document.body.offsetTop || document.documentElement.offsetTop,
left: window.pageYOffset || document.body.offsetLeft || document.documentElement.offsetLeft
}
}
</script>
</head>
<body>
<img id="top" src="images/Top.jpg" alt="">
<div>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
九尺龙泉万卷书，上天生我意何如。<br>
不能报国平天下，枉为男儿大丈夫。<br>
</div>
</body>
</html>◆固定导航栏+缓速广告跟随+返回顶部：
◇js
/**
* 功能：垂直方向上缓度滚动到某个位置
* 参数说明：element元素对象 target指定位置
* @param element
* @param target
*/
function scrollAnimateY(element, target) {
//使用定时器之前先清除定时器
clearInterval(element.timer);
//设置定时器
element.timer = setInterval(function () {
//计算步长
element.speed = (target - element.leader) / 10;
//二次计算步长 防止 水永远取不尽 定时器永远不停
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//距离是否只剩一步之遥
if (Math.abs(target - element.leader) <= Math.abs(element.speed)) {
window.scrollTo(0, target);
console.log(element.leader);
clearInterval(element.timer);
return;
}
//设置移动的动画
window.scrollTo(0, element.leader + element.speed);
}, 30);
}
/**
* 功能：水平方向的元素缓速移动的动画
* @param element
* @param target
*/
function animateX(element, target) {
//绑定计时器之前先清除定时器
clearInterval(element.timer);
element.timer = setInterval(function () {
//注意：this.offsetLeft最终获取的是number类型的值，并且它还会对小数进行四舍五入，
//如果this.style.left中有小数，并且还低于0.5，那么就会导致offsetLeft每次获取到的值，
//都是一样，然后就会造成 盒子不懂，定时器不停的现象发生，所以缓速动画时要记得给步长取整
// 如果步长>0就向上取整，避免步长小于0.5时出现bug,
// 如果步长<0，就向下取整，避免步长下雨-0.5时出现bug。
//每次移动的步长
element.spend = (target - element.offsetLeft) / 10
//对步长进行取整，避免offsetLeft底层的四舍五入的影响
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
// 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetLeft) <= Math.abs(element.spend)) {
element.style.left = target + "px";
clearInterval(element.timer);
return;
}
//重新设置距离左边的位置
element.style.left = element.offsetLeft + element.spend + "px";
console.log(element.style.left)
}, 30);
}
/**
* 功能：垂直方向的元素缓速移动的动画
* @param element
* @param target
*/
function animateY(element, target) {
//绑定计时器之前先清除定时器
clearInterval(element.timer);
element.timer = setInterval(function () {
//注意：this.offsetTop最终获取的是number类型的值，并且它还会对小数进行四舍五入，
//如果this.style.Top中有小数，并且还低于0.5，那么就会导致offsetTop每次获取到的值，
//都是一样，然后就会造成 盒子不懂，定时器不停的现象发生，所以缓速动画时要记得给步长取整
// 如果步长>0就向上取整，避免步长小于0.5时出现bug,
// 如果步长<0，就向下取整，避免步长下雨-0.5时出现bug。
//每次移动的步长
element.spend = (target - element.offsetTop) / 10
//对步长进行取整，避免offsetTop底层的四舍五入的影响
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
// 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetTop) <= Math.abs(element.spend)) {
element.style.top = target + "px";
clearInterval(element.timer);
return;
}
//重新设置距离左边的位置
element.style.top = element.offsetTop + element.spend + "px";
console.log(element.style.top)
}, 10);
}
/**
* 功能：获取scroll对象
* @returns {*}
*/
function scroll() {
/*
*注意事项：
*1.无论有没有声明DTD 在IE9及以上的所有浏览器都支持window.pageXOffset和window.pageYOffset
* 但是在IE9以下不支持，并且会返回undefined。
*2.在没有声明DTD时 在IE9以上的所有浏览器都支持document.body.scrollLeft和document.body.scrollTop
* 在声明了DTD时 所有浏览器都不支持，并且会返回0
*3.在声明了DTD时 所有浏览器都支持document.documentElement.scrollLeft和document.documentElement.scrollTop
* 无论有没有声明DTD IE浏览器都支持,没有声明DTD 其它除了IE浏览器外都不支持，并且会返回0。
* */
//判断是否不为undefined
if (window.pageXOffset !== "undefined" || window.pageYOffset !== "undefined") {
//返回一个关于scroll的对象回去
return {scollLeft: window.pageXOffset, scollTop: window.pageYOffset};
}
else if (document.compatMode === "BackCompa") {//是否没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）
//判断是否是IE浏览器
if (document.documentElement.scrollLeft || document.documentElement.scrollTop) {
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
else {//如果不是IE浏览器
return {scollLeft: document.body.scrollLeft, scollTop: document.body.scrollTop};
}
}
else {//如果声明了DTD
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
// //精简版封装只需要返回 这个就是上面判断的精简 效果一样
// return {
// scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
// scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
// }
}
/**
* 功能：根据 传递参数 返回相应的对象
* 说明：参数为：#id选择器、.class选择器、tag普通选择器其中一种
* @param str
* @returns {*}
*/
function $(str) {
//获取头部选择符
var head = str.charAt(0);
//去除id选择器与class选择器标识后的内容
var body = str.slice(1);
if (head === "#") { //id
return document.getElementById(body);
} else if (head === ".") {//class
return document.getElementsByClassName(body);
} else {//tag
return document.getElementsByTagName(str);
}
}
//******************获取子元素节点*********开始********//
/**
* 功能：获取第一个子元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getfirstchild(ele) {
return ele.firstElementChild || ele.firstChild;
}
/**
* 功能：获取最后一个子元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getlastchild(ele) {
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：获取对应索引值的子元素节点
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getchildofindex(ele, index) {
return ele.children[index];
}
/**
* 功能：获取所有的子元素节点
* @param ele
* @returns {Array}
*/
function getallchild(ele) {
var newArr = [];
var oldArr = ele.children;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i].nodeType === 1) {
newArr.push(oldArr[i]);
}
}
return newArr;
}
//******************获取子元素节点*********结束********//
//******************获取兄弟元素节点*********开始********//
/**
* 功能：获取上一个兄弟元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getpresibling(ele) {
var pre = ele.previousElementSibling || ele.previousSibling;
return pre;
}
/**
* 功能：获取下一个兄弟元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getnextsibling(ele) {
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：获取对应索引值的兄弟元素节点
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getsiblingofindex(ele, index) {
return ele.parentNode.children[index];
}
/**
* 功能：获取所有的兄弟元素节点（不包括自己）
* @param ele
* @returns {Array}
*/
function getallsibling(ele) {
var newArr = [];
var oldArr = ele.parentNode.children;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i] != ele) {
newArr.push(oldArr[i]);
//newArr[newArr.length]=oldArr[i];
}
}
return newArr;
}
//******************获取兄弟元素节点*********结束********//<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏+缓速广告跟随+返回顶部</title>
<style type="text/css">
.top {
/*width: 1519px;*/
width:100%;
height: 45px;
background: url(images2/r1.png) top center no-repeat;
margin:0 auto;
}
.main {
/*width: 1519px;*/
width:100%;
height: 7573px;
background: url(images2/box.png) top center no-repeat;
}
.b-left {
width: 120px;
height: 288px;
background: url(images2/r2_c1.png) 0 0 no-repeat;
position: absolute;
left: 10px;
top: 250px;
}
.b-right {
width: 120px;
height: 288px;
background: url(images2/r2_c2.png) 0 0 no-repeat;
position: absolute;
right: 10px;
top: 250px;
}
.a-top {
width: 50px;
height: 50px;
background: url(images2/20150717215921.png) 0 0 no-repeat;
position: fixed;
right: 50px;
bottom: 50px;
}
.fix {
position: fixed;
left:0;
top:0;
}
</style>
</head>
<body>
<div class="main">
<div class="top" id="top"></div>
<div class="b-left" id="b-left"></div>
<div class="b-right" id="b-right"></div>
<div class="a-top" id="a-top"></div>
</div>
</body>
<script type="text/javascript" src="9.自己封装的query1.0.0.2.js"></script>
<script>
//需求：固定导航栏，左右广告缓素跟随移动，点击黑色箭头缓慢移动到最上面
//思路：
// 当卷去的距离大于头部时，设置头部固定定位
// 每一次滚动时，广告都会缓速移动，移动的距离等于滚动的距离加上广告本身距离上面的距离
// 当点击黑色箭头时，页面缓速移动到最上面，技术点：window.scrollTo(x,y)
//步骤：
//1.获取事件源及相关对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关对象
var ntop=$("#top");
var bleft=$("#b-left");
var bright=$("#b-right");
var atop=$("#a-top");
var btop=bleft.offsetTop;
//2.绑定事件
window.onscroll= function () {
atop.leader=scroll().scollTop;
if(scroll().scollTop>ntop.offsetHeight){
ntop.className+=" fix";
}
animateY(bleft,scroll().scollTop+btop);
animateY(bright,scroll().scollTop+btop);
}
atop.onclick=function(){
scrollAnimateY(atop,0);
}
//3.书写事件驱动程序
</script>
</html>