一:查看滚动条的滚动距离

1:window.pageXOffset

2:window.pageYOffest

(IE8及IE8以下不兼容)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 一百个br,有滚动条,window.pageYOffset可求出滚动条到的该位置 --><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

滚动条没滚动位置:

滚动条滚动之后:

横向滚动条:

<body><hr style="width:10000px">
</body>

3:IE8和IE8以下的浏览器用这两个 document.body.scrollLeft/Top   ie8  ie5 ie4

document.documentElement.scrollLeft/Top ie7 ie6

由于兼容性比较混乱,这两个方法中其中一个方法在浏览器上有值,那么另一个则是0,为了不去记忆哪个方法适用于哪个浏览器,我们采取相加的方法,因为不可能存在两个同时有值

<script>document.body.scrollLeft+document.documentElement.scrollLeft
</script>

4:封装兼容性方法,求滚动轮滚动离getScrollOffset()

    <script>function getScrollOffset(){if(window.pageXOffset){//能用此方法的情况下return{//括号必须加在return的后面,不然就return为空x:window.pageXOffset,y:window.pageYOffset}}else{return{x:document.body.scrollLeft+document.documentElement.scrollLeft,y:document.body.scrollTop+document.documentElement.scrollTop} }}</script>

二:求可视区窗口的尺寸 

1:window.innerWidth  (像素单位)

2:window.innerHeight 

(IE8以及IE8以下不兼容)

3:document.documentElement.clientWidth/clientHeight

(标准模式下,任意浏览器都兼容)

4:document.body.clientWidth/clientHeight

(适用于怪异(混杂)模式下的浏览器,如想要你的浏览器启用混杂模式,就将前面的<!DOCTYPE html>删除,那么如何判断浏览器是标准模式还是怪异模式呢,用document.compatMode,若返回CSS1Compat则是标准模式,若BackCompat则是怪异模式)

5:封装兼容性方法,返回浏览器视口尺寸getViewportOffset()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>function getViewportOffset(){if(window.innerWidth){return {w:window.innerWidth,h:window.innerHeight}}else{if(document.compatMode==="BackCompat"){return{w:document.body.clientWidth,h:document.body.clientHeight}}else{return{w:document.documentElement.clientWidth,h:document.documentElement.clientHeight}}}}</script>
</body>
</html>

三:查看元素的几何尺寸 

1:domEle.getBoundingClientRect()

(兼容性很好,该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标,bottom是浏览器顶部到元素底部的距离,height和width属性老版本IE并未实现,如果没有也可以根据已知的相见求出来,右侧边减左侧边)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div style="width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px;" ></div><script>var div=document.getElementsByTagName('div')[0];</script>
</body>
</html>

返回结果是实时的,只是个静态写照

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div style="width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px;" ></div><script>var div=document.getElementsByTagName('div')[0];var box=div.getBoundingClientRect();//把值放进box里面div.style.width="200px";//改变宽</script>
</body>
</html>

值还是没改变

 四:查看元素的尺寸(比上个方法简便)

1:dom.offsetWidth,dom.offsetHeight

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div style="width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px;" ></div><script>var div=document.getElementsByTagName('div')[0];</script>
</body>
</html>

如果加个padding之后的宽高呢?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div style="padding:200px;width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px;" ></div><script>var div=document.getElementsByTagName('div')[0];</script>
</body>
</html>

可知,这两个求的是视觉上的尺寸

如果要求内容区的宽,则间接访问它的css

2:查看元素的位置dom.offsetLeft,dom.offsetTop

(对于无定位父级的元素,返回相对文档的坐标。对于有定位父级的元素,返回相对于最近的有定位的父级的坐标)

求里面红色方块的位置,因为有父级div当并且父级有定位,所以它求的不是相对于页面的位置距离,而是父级div的位置距离

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 嵌套div --><div style="width: 300px;height: 300px;border: 2px solid black;position: relative;top:100px;left:100px"><div class="demo" style="width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px;" ></div></div><script>var div=document.getElementsByClassName('demo')[0];</script>
</body>
</html>

3:dom.offsetParent

(返回最近的有定位的父级,如无,返回body,body.offsetParent,返回null)

父级定位是position:static时,也是返回无定位的数值,static是默认,默认是top,left无效果了

无定位时:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 嵌套div --><div style="width: 300px;height: 300px;border: 2px solid black;top:100px;left:100px"><div class="demo" style="width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px;" ></div></div><script>var div=document.getElementsByClassName('demo')[0];</script>
</body>
</html>

有定位时:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 嵌套div --><div style="width: 300px;height: 300px;border: 2px solid black;position: relative;;top:100px;left:100px"><div class="demo" style="width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px;" ></div></div><script>var div=document.getElementsByClassName('demo')[0];</script>
</body>
</html>

五:让滚动条滚动

1:window上有三个方法 scroll(),scrollTo(),scrollBy() 
scroll()和scrollTo()功能一样,实例用法:比如一些网页有展开,收起功能,收起回到展开的滚动条位置

(三个方法功能类似,用法都是将x,y坐标传入,前两个方法括号里的数据是实现让滚动轮滚动到当前位置,而不是距离,后面一个是滚动距离)
负数是往上滚动

区别:scrollBy()会在之前的数据基础之上做累加

利用scrollBy()快速阅读的功能​​

 0是x轴滚动距离,500是y轴滚动距离

实现一个自动阅读的代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;思嘉·奥哈拉长得并不漂亮,但是男人们像塔尔顿家那对孪生兄弟为她的魅力所迷住时,就不会这样想了。她脸上有着两种特征,一种是她母亲的娇柔,来自法兰西血统的海滨贵族;一种是她父亲的粗犷,来自浮华俗气的爱尔兰人,这两种特征混在一起显得不太协调,但这张脸上尖尖的下巴和四方的牙床骨,是很引人注意的,她那双淡绿色的眼睛纯净得没有一丝褐色,配上乌黑的睫毛和翘起的眼角,显得韵味十足,上面是两条墨黑的浓眉斜在那里,给她木兰花般白皙的肌肤划上十分分明的斜线,这样白皙的皮肤对南方妇女是极其珍贵的。她们常常用帽子、面纱和手套把皮肤保护起来,以防受到佐治亚炎热太阳的暴晒。<br />&nbsp;&nbsp;&nbsp;&nbsp;1861年四月一个晴朗的下午,思嘉同塔尔顿家的孪生兄弟斯图尔特和布伦特坐在她父亲的塔拉农场阴凉的走廊里,她的美貌显得更明媚如画了。她穿一件新绿花布衣裳,长长的裙子在裙箍上舒展着,配上她父亲从亚特兰大给她带来的新绿羊皮便鞋,显得很相称。她的腰围不过17英寸,是附近三个县里最细小的了,而这身衣裳更把腰肢衬托得更完整,加上里面那件绷得紧紧的小马甲,使她的只有16岁但已发育得很好的乳房便跃然显露了。不过,无论她散开的长裙显得多么老实,发髻梳在后面显得多么端庄,那双交叠在膝头上的小手显得多么文静,她的本来面目终归是藏不住的。那双绿色的眼睛生在一张甜美的脸上,却仍然是任性的,充满活力的,与她的装束仪表很不相同。她的举止是由她母亲和嬷嬷的严厉管教强加给她的,但她的眼睛属于她自己。<br />&nbsp;&nbsp;&nbsp;&nbsp;她的两旁,孪生兄弟懒懒地斜靠在椅子上,斜望着从新装的玻璃窗透过来的阳光谈笑着,四条穿着高统靴和因经常骑马而鼓胀的长腿交叠在那里。他们现有19岁,身高六英尺二英寸,长长骨骼,肌肉坚实,晒得黑黑的脸膛,深褐色的头发,眼睛里闪着快乐的神色。他们穿着同样的蓝上衣和深黄色裤子,长相也像两个棉桃似的。<br />&nbsp;&nbsp;&nbsp;&nbsp;外面,阳光斜照到场地上,映照着一簇簇的白色花朵在绿色的背景中显得分外鲜艳。孪生兄弟起来的马就拴在车道上,那是两匹高头大马,毛色红得象主人的头发;马腿旁边有一群吵吵嚷嚷一直跟随着主人的猎犬。稍稍远一点的地方躺着一条白色带有黑花斑的随车大狗“践行”,也称颜李学派。反对死读书,非难程朱陆王学说。主,它把鼻子贴在前爪上,耐心等待着两个小伙子回家去吃晚饭。<br />&nbsp;&nbsp;&nbsp;&nbsp;在这些猎犬、马匹和两个孪生兄弟之间,有着一种比通常更亲密的关系。他们都是年轻、健康而毫无思想的动物,也同样圆滑、优雅,两个小伙子和他们所骑的马一样精神,但都带有危险性,可同时对于那些知道怎样驾驭他们的人又是可爱的。<br />&nbsp;&nbsp;&nbsp;&nbsp;虽然坐在走廊里的人,都同生在优裕的庄园主家庭,从小由仆人细心服侍着,但他们的脸显得并不懒散。他们像一辈子生活在野外、很少在书本上的乡巴佬一样,显得强壮而畗有活力。生活在北佐治亚的克莱顿县,与奥古斯塔、萨凡纳和查尔斯顿比较起来还有一点粗犷风味。南部开化得较早的文静居民不逊内地佐治亚人,可在北佐亚这儿,人们并不以缺乏高雅的传统文化教育为耻,只要在那些在他们认为重要的事情上学得精明就行了。他们心目中所关注的事,就是种好棉花,骑马匹得好,打枪打得准,跳舞跳得轻快,善于体面地追逐女人,像个温文尔雅的绅士喝酒。<br />&nbsp;&nbsp;&nbsp;&nbsp;这对孪生兄弟在这些方面都很精通,但他们学习书本知识的无能也是出众的。他们家拥有比全县其他人家更多的钱、更多的马和更多的奴隶,可是两兄弟同他们的大多数穷邻居比起来,胸中的文墨更少得多。<br />&nbsp;&nbsp;&nbsp;&nbsp;正是这个缘故,斯图尔特和布伦特在塔拉农场走廊里聊天,消磨这四月傍晚的大好时光。他们刚被佐治亚大学开除,而这是过去两年中把他们撵走的第四所大学了。于是他们的两个哥哥,汤姆和博伊德,也同他们一起回到了家里,因为在这所学校既然不欢迎那些孪生兄弟,两位做哥哥的也就不高兴在那里待下去了。斯图尔特和布伦特把他们最近一次的除名当做一个有趣的玩笑;而思嘉呢,她自从去年离开费耶特维尔女子学校以后就一直懒得去摸书本,所以也像他们那样觉得这是令人高兴的事。<br />&nbsp;&nbsp;&nbsp;&nbsp;“我认为你们俩一点也不在乎被学校除名,汤姆也是这样,”她说。";可是博伊德怎么办?他一心想受教育,而你们俩接连把他从弗吉尼亚大学、亚拉巴马大学、南卡罗来纳大学拖了出来,如今又从佐治亚大学回来了。这样下去,他永远也将完不成他的学业!”“唔,他可以到费耶特维尔那边的帕马利法官事务所去学法律嘛,”布伦特漫不经心地答道。";并且,这没有什么关系。<br />&nbsp;&nbsp;&nbsp;&nbsp;反正在学习结束之前我们不得不回家的。”“为什么?”“战争嘛!傻瓜!战争随时可能开始,战争打响之后难道你认为我们还会留在学校里吗?”“你明明知道不会有什么战争的,”思嘉生气地说。";那只是嘴上谈谈罢了。就在上个星期,艾希礼·威尔克斯和他父亲还对我爸说,咱们派驻华盛顿的专员将要同林肯先生达成——达成一个关于南部联盟的协议呢。况且不管怎样,北方佬从小害怕我们,根本不会有什么战争,谈它干什么,我讨厌听到关于战争的事情。”“不会有什么战争!";孪生兄弟如同他们被欺负了似的地喊起来。<br />&nbsp;&nbsp;&nbsp;&nbsp;“亲爱的,战争当然会打起来的啊!";斯图尔特说。";北方佬可能害怕咱们,可是自从前天波尔格将军把他们赶出萨姆特要塞以后,他们只好打起来了,要不就会作为胆小鬼在全世界面前丢脸。什么,南部联盟——";听到这里,思嘉很不耐烦地嘟起嘴来。<br />&nbsp;&nbsp;&nbsp;&nbsp;“只要你再说一声‘战争’,我就进屋去,把门关上,我这辈子还从来没有像对‘战争’这个词感到讨厌,除非那个词意味着'脱离联邦'。爸爸总是从早到晚谈论战争,战争,所有来看他的绅士们也叫嚷着什么萨姆特要塞、州权、亚伯·林肯,简直烦得我要大喊大叫!而且所有的男孩子也都在谈这些,还有他们的军队。今年春天,任何晚会上也没有听到这什么快乐的事情,因为男孩子再不谈别的了。我最高兴的是佐治亚要等到过了圣诞节以后才宣布脱离联邦,要不然会把圣诞晚会也糟蹋了。要是你再谈‘战争’我就马上进屋去了。”她说到做到,因为她从来就忍受不了不以她为主题的谈话。不过她说话时总是面带微笑,刻意加深脸的酒窝,同时把像蝴蝶翅膀似的两圈又硬又黑的睫毛迅速地扇动起来。小伙子们给迷住了,这正中她的心意,于是他们向她道歉,他们并不因为她对战争不感兴趣而丝毫轻视她。相反,他们更敬重她了。战争原来是男人的事,与女人无关,因此他们便把她的态度当成是女人味十足的特征。<br />&nbsp;&nbsp;&nbsp;&nbsp;把他们从讨厌战争的话题支使开以后,她便饶有兴趣地回到他们当前的环境上来。<br />&nbsp;&nbsp;&nbsp;&nbsp;“对于你俩再一次开除的事你母亲说了些什么呀?";小伙子显得有点不自在,想起三个月前他们从弗吉尼亚大学被请回家时母亲的那番表现。<br />&nbsp;&nbsp;&nbsp;&nbsp;“唔,她还没有机会说呢,”斯图尔特答道。";今天一清早她还没起床,汤姆和我俩便出门了。汤姆半路上去方丹家了,我们便径直到这儿来了。”“昨天晚上你们到家时难道她什么话也没说吗?”“昨晚我们可有运气了。在我们快要到家的时候,上个月我妈在肯塔基买下的那匹公马给送来了,家里正热闹着呢。原来那畜生——它长得可真威武,思嘉,你一定得告诉你爸,叫他赶快去看看,那畜生一路上已经把马夫咬了两大口,而且踏坏了我妈的两个黑小子,他们是在琼斯博罗遇上的。而且,就在我们刚要到家的时候,它差点儿把我们的马棚给踢倒了,还捎带把我妈的那匹老公马草莓也踢了个半死。我们到家时,妈正在妈棚里拿着一口袋糖哄它,让它慢慢平静下来,还真起作用了。黑奴们躲得远远的,瞪着眼睛简直给吓坏了,可妈还在跟那畜生亲切说话,仿佛跟它是一家人似的,它正在吃她手里的东西呢。世界上谁也比不上我妈那样会跟马打交道,那时她看见了我们,便说:‘天哪,你们四个又回来干什么呀?你们简直比埃及的瘟疫还让人讨厌!'这时那匹公马开始喷鼻子直立起来,她赶紧说:‘从这里滚开罢,难道你们没看见这个大宝贝在生气了吗?等明天早晨我再来服侍你们四个!'于是,我们便上床睡觉了。今天一早,趁她还来不及抓住我们,我们便溜了出来,只留下博伊德一个人去对付她。”“你们认为她会打博伊德吗?”思嘉知道,瘦小的塔尔顿太太对她那几个已长大成人的儿子还是很粗暴的,她认为必要的时候还会用鞭子抽他们的脊背,对于这种情形,思嘉和县里的其他人都有点不大习惯。<br />&nbsp;&nbsp;&nbsp;&nbsp;比阿特里斯·塔尔顿是个忙人,她经营一大片棉花地,一百个黑奴和八个孩子,而且还有个养马常她生性暴躁,非常容易就四个儿子经常吵架而大发雷霆。她一方面不许任何人打她的一骑马或一个黑奴,另一方面却认为偶尔打打她的孩子们,对他们并没有什么坏处。<br />&nbsp;&nbsp;&nbsp;&nbsp;“她从来没有打过博伊德。这不仅因为他年龄最大,还是因为他是个矮子,”斯图尔特这样说,对自己那六英尺的个头儿自豪。";这是我们为什么把他留在家里去向妈交代一切的原因。老天爷明白,我们都19了,汤姆21了,可她还把我们当六岁孩子看待。妈应当不再打我们!”“你母亲明天会骑那匹新买来的马去参加威尔克斯家的野宴?”“她想骑的,但是爷说骑那匹太危险了。而且,无论如何,姑娘不会同意她骑。她们说,要让她至少像个贵妇人那样乘坐马车去参加宴会。”“希望明天别下雨,”思嘉说。";一星期几乎天天下雨。要是把野宴改成家餐,那才是扫兴不过的事呢。”“唔,明天准晴,还会像六月天那样炎热,”斯图尔特说。<br />&nbsp;&nbsp;&nbsp;&nbsp;“你看那落日,我还从没过比这更红的太阳呢。用落日来判断天气,往往是不会错的。”他们都朝远方望去,越过奥哈拉家无边无际的新翻耕的棉花地,直到红红的地平线上。如今太阳在弗林特河对岸的群山后面一起汹涌的红霞中缓缓降落,四月白天的温暖也渐渐消退,隐隐透出丝丝的凉意。<br />&nbsp;&nbsp;&nbsp;&nbsp;春天来得很早,伴随来的是几场温暖的春雨,这时粉红的桃花突然纷纷绽放,山茱萸雪白也似的繁花将河边湿地和山冈装点起来。春耕已快要结束,湿润的土地饥饿似的等待着人们把它翻开并撒上棉籽,它在犁沟的顶上显出是淡红色,在沟道两旁的地方则呈现出猩红和栗色来。农场那座粉刷白了的砖房如同落在茫茫红海中的一个岛屿,那是一起由新月形巨浪组成的大海,但是当那些带粉红红尖顶的水波分裂为浪花时,它立即僵化了。因为这里没有像佐治亚中部的黄土地或海滨种植场滋润的黑土地那样的长长的笔直的犁沟。北佐治亚连绵起伏的山麓地带被犁成了无数弯弯曲曲地垅沟,这样说,对自己那使肥沃的土壤不致被冲洗到河床里去。<br />&nbsp;&nbsp;&nbsp;&nbsp;这一片土地红得耀眼,雨后更红得像鲜血一般,干旱时便成了满地的红砖粉,这是世界上最好的产棉地。这里有洁白的房屋,翻耕过的田地,缓缓流过的黄泥河水,但同时也是一个由阳光灿烂和阴翳深浓形成对比的地方。尚待种植的空地和绵延数英里的棉花田微笑着袒露在阳光之中。在这些田地的边缘上有着一片处女林,即使在最炎热的中午它们也是幽暗而清凉的,而且显得有点神秘,有点不那么和善,其中那些飕飕作响的松树好像怀着老年人的耐心在等待着,好像轻轻的叹息:“当心呀!你们原先是我们的。我们能够把你们要回来。”坐在走廊里的三个年轻人听到得得的马蹄声,马具链环的丁当声和黑奴们的欢笑声;那些干农活的人和骡马从地里回来了。这时从屋子里传来思嘉的母亲爱伦·奥哈拉温和的声音,她在呼唤提着钥匙、篮子的黑女孩,后者用尖脆的声调答道:“太太,来啦,”于是便传来从后面过道里走向薰腊室的脚步声,爱伦要到那里去给回家的田间劳动者分配食物。接着便听到瓷器当当和银餐具丁丁的响声,这时管衣着和膳事的男仆波克已经在摆桌子开晚饭了。<br />&nbsp;&nbsp;&nbsp;&nbsp;听到这些声响,这对孪生兄弟知道他们该动身回家了。但是他们不想回去见母亲的面,便在塔拉农场的走廊里徘徊,盼望着思嘉邀请他们留下来吃晚饭。<br />&nbsp;&nbsp;&nbsp;&nbsp;“思嘉,我们谈谈明天的事吧,”布伦特说。";不能因为我们不在,不了解野宴和舞会的事,就凭这理由不让咱们明儿晚上多多地跳舞。你没有答应他们大家吧,是不是?”“唔,我答应了!我怎么知道你们都会回来呢?我哪能冒险在一边等着,等着专门伺候你们两位呀?”“你在一边等着?";两个小伙子放声大笑。<br />&nbsp;&nbsp;&nbsp;&nbsp;“亲爱的,你得跟我跳第一个华尔兹,末了跟斯图跳最后一个,然后我们一起吃晚饭。像上次舞会那样坐在楼梯平台上,让金西嬷嬷再来给咱们算命。”“我不可喜欢听金西嬷嬷算命。你知道她说过我会嫁给一个头发鸟亮、黑胡子很长的男人,但我是不喜欢黑头发男人的。”“亲爱的,你喜欢红头发的吗?”布伦特傻笑着说。";现在,快说吧,答应跟我们跳所有的华尔兹,跟我们一道吃晚饭。”“你要是肯答应,我们便告诉你一个秘密。";斯图尔特说。<br />&nbsp;&nbsp;&nbsp;&nbsp;“什么?”思嘉叫着,一听到";秘密";这个词便像个孩子似地活跃起来。<br />&nbsp;&nbsp;&nbsp;&nbsp;“斯图,是不是我们昨天在亚特兰大听到的那个消息?如果是,那你知道,我们答应过不告诉别人的。”“嗯,那是皮蒂小姐告诉我们的。”“什么小姐?”“就是艾希礼·威尔克斯的表姐。你知道,皮蒂帕特·波密尔顿的小姐,查尔斯和媚兰的姑妈,她住在亚特兰大。”“这我知道,一个傻老太婆,我一辈子也没见过比她更傻的了。”“对,我们昨天在亚特兰大等着搭火车回家时,她的马车正好从车站经过,她停下来跟我们说话,告诉我们明天晚上的威尔克斯家的舞会上要宣布一门亲事。”“唔,我也听说过,”思嘉失望说,";她的那位傻侄儿查理·汉密尔顿和霍妮·威尔克斯。这几年谁都在说他们快要结婚了,虽然他本人对这件事似乎有点不冷不热似的。”“你认为他傻吗?”布伦特问。";去年圣诞节你可让他在你身边转了个够呢。”“我没法不让他转呀,”思嘉毫不在意地耸了耸肩膀。";我觉得他这个人太娘娘腔了。”“但是,明晚要宣布的并不是他的亲事,”斯图尔特得意地说。“那是艾希礼和查理的妹妹媚兰小姐订婚的事哩!";虽然她脸色没有变,可是嘴唇发白了。就像冷不防受到当头一击。思嘉在震动的最初几秒钟还不明白那是怎么回事。<br />&nbsp;&nbsp;&nbsp;&nbsp;注视斯图尔特时思嘉的脸色还那么平静,以致这位毫无分析头脑的人还以为她仅仅感到惊讶和很有兴趣。<br />&nbsp;&nbsp;&nbsp;&nbsp;“皮蒂小姐告诉我们,他们原准备明年才宣布订婚,因为媚兰小姐近来身体不怎么好;可周围都在谈论战争,两家人都觉腹不如赶快成婚的好。所以决定明天晚上在宴会上宣布。<br />&nbsp;&nbsp;&nbsp;&nbsp;我们把秘密告诉你了,你看,思嘉,你也得答应跟我们一起吃晚饭呀。”“当然,我会的。";思嘉下意识地说。<br />&nbsp;&nbsp;&nbsp;&nbsp;“并且跳所有的华尔兹吗?”<br />&nbsp;&nbsp;&nbsp;&nbsp;“所有的。”<br />&nbsp;&nbsp;&nbsp;&nbsp;“你真好!我敢打赌,别的小伙子们准要疯了。”“让他们去发疯好了,”布伦特说。“我们俩能对付他们的。<br />&nbsp;&nbsp;&nbsp;&nbsp;瞧瞧吧,思嘉。明天上午的野宴也跟我们坐在一起好吗?”“什么?”斯图尔特将请求重复了一遍。<br />&nbsp;&nbsp;&nbsp;&nbsp;“当然。”<br />&nbsp;&nbsp;&nbsp;&nbsp;哥儿俩心里美滋滋的但也有些惊异。尽管他们把自己看做思喜所嘉许的追求者,但以前他们从没这么轻易得到过这一嘉许的表示。她经常只让他们倾诉、乞求,敷衍他们,不明确表示可否,他们烦恼时便报以笑颜,他们发怒时则略显冷淡。但现在她实际上已经把明天全部的活动都许给了他们——答应野宴时跟他们坐在一起,跟他们跳所有的华尔兹(而且他们决意要使每一个舞都是华尔兹!),并且一道吃晚饭。就为这些,被大学开除也是值得的。<br />&nbsp;&nbsp;&nbsp;&nbsp;成功给他们带来了满腔热情。使他们愈加留连忘返,谈论着明天的野宴,舞会和艾希礼·威克斯与汉·媚兰,抢着说话,开着玩笑,然后大笑不已,看来是在多方暗示要人家挽留他们吃晚饭。他们闹了好一会儿,才发现思嘉已没有什么要说的,这时气氛有点变了。哥儿俩并不知道是怎么变的,只觉得那番高兴的光景已经在眼前消失。思嘉好像并不注意他们在说些什么,尽管她的一些回答也还得体。他们意识到某种难以理解的事,为此感到沮丧和不安,末了又赖着待了一会儿才看看手表,勉强站起身来。<br />&nbsp;&nbsp;&nbsp;&nbsp;在新翻耕过的田地那边,太阳已经西下,河对岸高高的树林已经在幽暗的暮色中渐渐模糊。家燕轻快地在院场上空飞来飞去,小鸡、鸭子和火鸡都纷纷从田地里回家来了。<br />&nbsp;&nbsp;&nbsp;&nbsp;斯图尔特大喊一声:“吉姆斯!";不一会一个和他们年龄相仿的高个儿黑孩子气喘吁吁地从房子附近跑出来,向两匹拴着的马走去,吉姆斯是贴身佣人,像那些狗一样到哪里都伴随着主人。他曾是他们儿时的玩伴,到他们十岁生日那一天便归他们自己所有了。塔尔顿家的猎犬一见他便从红灰土中跳起来,站在那里恭敬主子们驾到。两个小伙子同思嘉握手告别,告诉她明早他们将赶到威尔克斯家去等候她。然后他们走下人行道,骑上马,由吉姆斯跟随着一口气跑上柏树夹道,一面回过头来,挥着帽子向思嘉高声叫喊。<br />&nbsp;&nbsp;&nbsp;&nbsp;他们在尘土飞扬的大道上拐过那个看不见塔拉农场的弯以后,布伦特勒住马,在一丛山茱萸下站住了。斯图尔特跟着停下来,黑小子也紧跑几步跟上了他们。两骑马觉得缰绳松了,便伸长脖子去啃柔嫩的春草,猎犬们重新在灰土中躺下,贪馋地仰望着在愈来愈浓的暮色中回旋飞舞的燕子。布伦特那张老实巴交的宽脸上呈现迷惑神情。<br />&nbsp;&nbsp;&nbsp;&nbsp;“听我说,”他说,";你不觉得她好像要请我们留下吃饭吗?”“我本来以为她会的,”斯图尔特答道。";我一直等着她说出来,但是她没有说。你想这是为什么?”“我一点也不明白。不过据我看,她应当留我们的。毕竟这是我们回家后的第一天,她跟我们又好久没见面。何况我们还有许许多多的事情没跟她说呢。”“据我看,我们刚来时她好像很高兴见到我们。”“本来我也这样想。”“可后来,大约半个钟头以前吧,她就不怎么说话了,好像有点头痛。”“我看到这一点了,可我当时并不在意。你想她是哪儿不舒服了呢?”“我不知道。你认为我们说了什么让她生气的话吗?”他们两人思量了一会儿。<br />&nbsp;&nbsp;&nbsp;&nbsp;“我什么也想不起来。况且,思嘉一生气,谁都看得出来。<br />&nbsp;&nbsp;&nbsp;&nbsp;她可从不像那样一声不响的女孩子。”<br />&nbsp;&nbsp;&nbsp;&nbsp;“对,这就是我喜欢她的地方。她生气时那么冷冷的抑制着性子走来走去,她会痛痛快快告诉你。不过,一定是我们说了或做了什么事,使得她默不作声,并装出不舒服的样子。我敢担保,我们刚来时她是很高兴并且有意要留我们吃晚饭的。”“你不认那是因为我们被开除了吗?”“决不会的!见鬼,别那么傻。我们告诉她这消息时,她还若无其事地笑呢。再说,思嘉对读书的事也不比我们重视呀。";布伦特在马鞍上转过身头唤那个黑人马夫:“吉姆斯!”“唔。”“你听见我们和思嘉小姐的话了吗?”“没有呀,布伦特先生!您怎么怀疑俺偷听白人老爷的话呢?”“我的上帝!偷听,你们这些小黑鬼什么事都知道。怎么,你这不是撒谎吗?我亲眼看见你偷偷走过走廊的拐角,蹲在墙边茉莉花底下呢。好,你听见我们说什么惹思嘉小姐生气——或者叫她伤心的话了吗?”他这一说,吉姆斯打消了假装不曾偷听的主意,皱着眉头回想起来。<br />&nbsp;&nbsp;&nbsp;&nbsp;“没什么,俺没听见您讲啥惹她生气的话。俺看她挺高兴见到你们,还嘁嘁喳喳像只小鸟儿乐个不停呢。后来你们谈论艾希礼先生和媚兰小姐的结亲的事,她才不作声了,像只雀儿看见老鹰打头上飞过一般。";哥儿俩面面相觑,同时点了点头,可是并不了解其中的奥妙。<br />&nbsp;&nbsp;&nbsp;&nbsp;“吉姆说得对,但我不明白那究竟是为什么,”斯图尔特说。";我的上帝!艾希礼对她有什么意义?只不过是个朋友罢了。她感兴趣的只是我们,她对他不怎么感兴趣。";布伦特点点头表示同意。<br />&nbsp;&nbsp;&nbsp;&nbsp;“可是,你想过没有,”他说,";也许艾希礼没告诉她明天晚上要宣布那件事,而她觉得不先告诉老朋友便对别的人都说了,因此生气了呢?姑娘们总是非常看重首先听到这种事情的。”“唔,可能,就算没有告诉她又怎样呢?本来是要保密,叫人大吃一惊的嘛,一个男人就没有权利对自己订婚的计划秘而不宣吗?要不是媚兰小姐的姑妈泄漏出来,我们也不会知道呀。而且思嘉一定早已知道他总是要娶媚兰的。你想,我们知道也有好几年了。威尔克斯家和汉密尔顿家向来是姑表联姻。他总有一天要娶她的,这谁都知道,就像霍妮·威尔克斯要同媚兰小姐的兄弟查尔斯结婚一样。”“好了,我不想谈下去了。不过,我对于她不留我们吃晚饭这一点,总是感到遗憾。老实说,我不想回家听妈妈对我们被学校开除的事大发雷霆,不能当做第一次那样看待了。”“说不定博伊德已经把她的火气平息下来了。你明白那个讨厌的矮鬼是多么伶牙俐齿。他每次都能把她说得心平气和的。”“是呀,他办得到,不过那要花博伊德许多时间。他要拐弯抹角走来走去去,直到妈妈给弄得实在糊涂了,情愿让步,才肯放他省下点嗓子去干律师的事。可是眼下,他恐怕还没来得及准备好开场白呢。我敢跟你打赌,你看,妈妈一定还在为那匹新来的马感到兴奋呢,说不定要到坐下来吃晚饭和看博伊德的时候才会想起我们又回家了。只要不吃完晚饭,她的怒火就会愈来愈旺。因此要到十点钟左右博伊德才有机会去告诉她,既然咱们校长采取了那样态度斥责你我两人,我们中间谁要是还留在学校也就太不光彩了。而要他把她扭过来转而对校长大发雷霆,责问博伊德干吗不开枪把他打死,那就非到半夜不行。因为,我们要半夜过后才能回家。";哥儿俩你瞧着我,我瞧着你,不知说什么是好。他们对于烈性的野马,对于行凶斗殴,以及邻里的公愤,都毫不畏惧,惟独那们红头发母亲的痛责和有时不惜抽打在他们屁股上的马鞭,才让他们感到不寒而栗。<br /><!-- 开始按钮 --><div class="start" style="width: 100px;height: 100px;background-color:blue;color: #fff;font-size: 40px;font-weight: bold;text-align: center;line-height: 100px;position: fixed;bottom:200px;right: 50px;border-radius: 50%;opacity: 0.5;">start</div><!-- 结束按钮 --><div class="stop" style="width: 100px;height: 100px;background-color:blue;color: #fff;font-size: 40px;font-weight: bold;text-align: center;line-height: 100px;position: fixed;bottom:50px;right: 50px;border-radius: 50%;opacity: 0.5;">stop</div><script>var start=document.getElementsByClassName('start')[0];var stop=document.getElementsByClassName('stop')[0];var timer=0;//赋值是避免直接点stopvar key=true;//设置这个的意义在于,没有这个的话点击start多次会有多个定时器,结束不了start.onclick=function (){if(key){timer=setInterval(function(){window.scrollBy(0,10);  //如果想实现加速,可以改这里面的值,设置一个变量为num},100);//这个值不能改key=false;}}stop.onclick=function(){clearInterval(timer);key=true;}</script>
</body></html> 

前端学习——17——获取窗口属性,dom尺寸,让滚动条滚动相关推荐

  1. 9_js 日期对象Date()、js定时器、获取窗口属性、获取dom尺寸、脚本化css

    日期对象Date() 封装函数,打印当前是何年何月何日何时,几分几秒 直接看w3c上的介绍吧 https://www.w3school.com.cn/js/jsref_obj_date.asp js定 ...

  2. 前端学习--常用标签及属性(超链接a标签与img图片标签)

    常用标签 1.超链接标签a <a href="链接地址" target="xx">xx</a> a标签最重要的属性是 href 属性,它 ...

  3. python学习之----获取标签属性

    到目前为止,我们已经介绍过如何获取和过滤标签,以及获取标签里的内容.但是,在网 络数据采集时你经常不需要查找标签的内容,而是需要查找标签属性.比如标签<a> 指向 的URL 链接包含在hr ...

  4. 前端学习-css3的一些属性

    一.伪元素 伪元素: before,after 相当于是元素内部的两个子元素(盒子),分别是一前一后的两个盒子,默认显示模式是行内式 必写项 :伪元素中必须有content属性,属性值可为空. 即,可 ...

  5. Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果

    css3过渡属性: 属性 描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...

  6. 前端学习笔记之CSS属性设置

    CSS属性设置 阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 ...

  7. 前端学习(218):属性选择器

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...

  8. mybatis学习(17):列名与属性名不一致的情况(使用别名)

    目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import com.geyao.mybatis. ...

  9. 【前端学习笔记】浮动属性

    浮动属性 文章目录 浮动属性 浮动的作用 浮动的副作用(清除浮动) 解决方法一:写固定高度 解决方案二:清除浮动 解决方案三:当前浮动元素后面补一个盒子,不设置宽高,clear:both 解决方案四: ...

最新文章

  1. head first python 第二版 中文版-Head First Python 中文版
  2. 交换机、路由器启动过程详述
  3. Archive for required library: ‘WebContent/WEB-INF/lib/xxx.jar cannotn
  4. 【要闻】Kubernetes无用论诞生、Elasticsearch 7.6.2 发布
  5. GPRS底层API(转)
  6. DIY协同办公平台(C/S)系列4之通讯录篇
  7. Java反射————Method根据方法名称字符串调用方法
  8. Github 下载项目的某一分支版本
  9. oracle10安装提示SID,Oracle重新安装报SID已经存在
  10. 谷粒商城:Oss endpoint can‘t be empty.
  11. CentOS 6.7下 Samba服务器的搭建与配置(share共享模式)
  12. (转)使用XMind打开.mmap文件不显示问题
  13. 安装zsh-autosuggestions zsh-syntax-highlighting
  14. 给惠普735g5 装Win10+Ubuntu 16.04双系统
  15. codeforce Zebras(思维 + 模拟)
  16. 人脸识别技术及其各种用例
  17. node.js如何升级
  18. MATLAB_遗传神经网络
  19. c语言stl用法,C STL快速入门!学习使我快乐
  20. 洛谷P2744 [USACO5.3]量取牛奶Milk Measuring

热门文章

  1. WinSCP软件安装教程
  2. yagni原则_YAGNI喜欢干吻
  3. C#制作UDP协议可同时收发Winform窗体
  4. 微信小程序退出按钮回退到登录页面
  5. 拼多多——多多的字符变换
  6. 树莓派4b安装win11/10过程全教程(附蓝屏inaccessible boot device解决办法)
  7. 计算机网络 --- 物理层(学习笔记)
  8. linux打开文件脚本,linux脚本文件实现的功能有哪些剧本用工具打开
  9. ios app 下载地址收集(一点一点收集中...)
  10. win7系统如何映射服务器,win7系统如何映射网络驱动器 win7系统映射网络驱动器方法...