scroll家族
Offset 自己的 偏移
scroll 滾動的
1/ scrollTop 和 scrollLeft
scrollTop 被卷去的頭部
它就是當(dāng)你滑動滾輪瀏覽網(wǎng)頁的時候網(wǎng)頁隱藏在屏幕上方的距離
2/怎么得到scrollTop
我們學(xué)習(xí)一個事件 ： 頁面滾動效果
window.onscroll = function() { 頁面滾動語句 }
谷歌瀏覽器 和沒有聲明 DTD <DOCTYPE > ：
document.body.scrollTop;
火狐 和其他瀏覽器
document.documentElement.scrollTop;
ie9+ 和 最新瀏覽器 都認(rèn)識
window.pageXOffset; pageYOffset （scrollTop）
兼容性寫法：
1 var scrollTop = window.pageYOffset || document.documentElement.scrollTop
2 || document.body.scrollTop || 0;
3/ JSON
**JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，我們稱之為JavaScript對象表示法篮昧。使用JSON進(jìn)行數(shù)據(jù)傳輸?shù)膬?yōu)勢之一赋荆。JSON實際上就是JavaScript **
Json很像我們學(xué)過的樣式條；
var myjson={k:v,k:v,k:v...} 鍵值對 key: value color: red;
Json一般就是被當(dāng)做一個配置單用懊昨；
我們的網(wǎng)站窄潭，可以注冊會員：
姓名： 李白
年齡: 500
職業(yè)： it
xml
json 對象 結(jié)構(gòu)書寫：
var json = { key: value， key1:value }
var json = {name: “李白”,age: 15}
使用：
json名.屬性 json.name 李白
var json1 = {name :"劉德華",age: 55};
console.log(json1.name); // 輸出名字 劉德華
console.log(json1.age); // 輸出年齡 55
4/判斷是不是怪異模式的瀏覽器
document.compatMode == "CSS1Compat"http:// 這里是聲明了DTD的
//檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
document.compatMode === "BackCompat"
BackCompat 未聲明
CSS1Compat 已經(jīng)聲明
注意大小寫
封裝自己的scrollTop left
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 3000px;
}
</style>
</head>
<body>
</body>
</html>
<script>
// var json = {left: 10, right: 10} 變異
//json.left json.top
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他瀏覽器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD
// 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪異模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
window.onscroll = function() {
console.log(scroll().top);
}
</script>
案例：跟隨的廣告
跟隨的廣告.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img{
position: absolute;
left:0;
top:50px;
}
#demo{
width:1000px;
margin:0 auto;
}
</style>
<script src="my.js" type="text/javascript"></script>
<script>
window.onload = function() {
var pic = $("pic");
var leader = 0;
var target = 0;
var timer = null; // 定時器
var top = pic.offsetTop; // 50
window.onscroll = function() {
clearInterval(timer);
target = scroll().top + top; // 把最新的 scrolltop 給 target
timer = setInterval(function() {
leader = leader + (target - leader ) / 10;
pic.style.top = leader + 'px';
},30)
}
}
</script>
</head>
<body>
<img src="images/aside.jpg" alt="" id="pic"/>
<div id="demo">
<p>天王蓋地虎酵颁，小雞燉蘑菇</p>
<p>天王蓋地虎嫉你，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎躏惋，小雞燉蘑菇</p>
<p>天王蓋地虎幽污，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎簿姨，小雞燉蘑菇</p>
<p>天王蓋地虎距误，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎扁位，小雞燉蘑菇</p>
<p>天王蓋地虎准潭，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎贤牛，小雞燉蘑菇</p>
<p>天王蓋地虎惋鹅，小雞燉蘑菇</p>
<p>天王蓋地虎则酝，小雞燉蘑菇</p>
<p>天王蓋地虎殉簸，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎沽讹，小雞燉蘑菇</p>
<p>天王蓋地虎般卑，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎爽雄，小雞燉蘑菇</p>
<p>天王蓋地虎蝠检，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎挚瘟，小雞燉蘑菇</p>
<p>天王蓋地虎叹谁，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎乘盖，小雞燉蘑菇</p>
<p>天王蓋地虎焰檩，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎订框，小雞燉蘑菇</p>
<p>天王蓋地虎析苫，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
<p>天王蓋地虎衩侥，小雞燉蘑菇</p>
<p>天王蓋地虎国旷，小雞燉蘑菇</p>
<p>天王蓋地虎，小雞燉蘑菇</p>
</div>
</body>
</html>
其中my.js:
function $(id) {return document.getElementById(id);}
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他瀏覽器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD
// 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪異模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
scrollTo(x,y)
window.scrollTo(15,15);
方法可把內(nèi)容滾動到指定的坐標(biāo)茫死。
格式：
scrollTo(xpos,ypos)
xpos 必需跪但。要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標(biāo)。
ypos必需峦萎。要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標(biāo)
因為我們的網(wǎng)頁大部分都沒有水平滾動條特漩，所以，這個x 不太常用骨杂。
案例：火箭返回頂部
小火箭返回頂部.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
width: 2000px;
}
.top{
position: fixed;
right:50px;
bottom:100px;
display: none;
}
</style>
<script src="my.js" type="text/javascript"></script>
<script>
window.onload = function() {
var goTop = $("gotop");
window.onscroll = function() {
scroll().top > 0 ? show(goTop) : hide(goTop); // 如果大于0 就顯示 否則隱藏
leader = scroll().top; // 把 卷去的頭部 給 起始位置
console.log(scroll().top);
}
var leader = 0,target = 0,timer = null;
// leader 起始位置 target 目標(biāo)位置
goTop.onclick = function() {
target = 0; // 點擊完畢之后 奔向0 去的 不寫也可以
timer = setInterval(function() {
leader = leader + (target - leader ) / 10;
window.scrollTo(0,leader); // 去往頁面中的某個位置
if(leader == target)
{
clearInterval(timer);
}
},20);
}
}
</script>
</head>
<body>
<div id="gotop" class="top">
<img src="images/Top.jpg" alt=""/>
</div>
<p>我是內(nèi)容部分涂身，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分搓蚪，有很多恩多很多</p>
<p>我是內(nèi)容部分蛤售，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分妒潭，有很多恩多很多</p>
<p>我是內(nèi)容部分悴能，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分雳灾，有很多恩多很多</p>
<p>我是內(nèi)容部分漠酿，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分谎亩，有很多恩多很多</p>
<p>我是內(nèi)容部分炒嘲，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分匈庭，有很多恩多很多</p>
<p>我是內(nèi)容部分夫凸，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分阱持，有很多恩多很多</p>
<p>我是內(nèi)容部分夭拌，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分衷咽，有很多恩多很多</p>
<p>我是內(nèi)容部分鸽扁，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分镶骗，有很多恩多很多</p>
<p>我是內(nèi)容部分桶现，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分卖词，有很多恩多很多</p>
<p>我是內(nèi)容部分巩那，有很多恩多很多</p>
<p>我是內(nèi)容部分吏夯，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分即横，有很多恩多很多</p>
<p>我是內(nèi)容部分噪生，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分东囚，有很多恩多很多</p>
<p>我是內(nèi)容部分跺嗽，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分页藻，有很多恩多很多</p>
<p>我是內(nèi)容部分桨嫁，有很多恩多很多</p>
<p>我是內(nèi)容部分璃吧，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
<p>我是內(nèi)容部分，有很多恩多很多</p>
</body>
</html>
my.js 部分
function $(id) {return document.getElementById(id);}
function show(obj) { obj.style.display = "block";}
function hide(obj) { obj.style.display = "none";}
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他瀏覽器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD
// 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪異模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
今日案例跟隨廣告和 火箭頭回頂部的圖片素材獲取：
鏈接：http://pan.baidu.com/s/1jIdQVlG 密碼：rlap
