loading...

最新文章 »

javascript天然的迭代器

它源于群里的某一题目:

有一个数n=5,不用for循环,怎么返回[1,2,3,4,5]这样一个数组
群的“糖果男孩”给的答案:

function getArr(n) {
var a = [],
b = [],
m = 0;
a.length = n + 1;
a.toString().replace(/,/g, function () {
b.push(++m);
});
return b;
}

来自:博客园-Ruby’s Louvre
通过javascript天然的迭代器.

900个月

Everybody has 900 months,one month pass through so fast,and your 900 months too.Near days i have a boring period,日子就这么可有可无的过去了。所以挺想有个网站,名字就叫big idea。在这900个月里,我总应该有些big idea吧。不能悄悄的来又悄悄的去,一片云彩都没有搅乱,多没意思。现在觉得技术真的很多,但是学什么都是应该有目的的吧,总要有个big idea来支撑它。可能现在我有点闲的没事了。I wanna achieve my first Big Idea.To create a web site which carry users’ Big Idea.These ideas should be big & some little difficult,of course they could be achieved.Users’ ideas can claim help.So our web site can help:1,record our work(Calendar,articals to help you),2.save your time,3.show your question/problem on your idea then group/tag them. just like this.Hope i can finish it.not like other thing-i wanna do it,but i’m lazy and can not finish it.I do not like that me.

Android Web App开发学习笔记(3)

HTML Storage APIs

essentially, three different types of client-side storage mechanisms are being
implemented as part of the HTML5 specification:
 Web storage: Often referred to as HTML5 local storage, this is a client-
side mechanism for storing key/value pairs. It’s simple, but very
powerful (see http://w3.org/TR/webstorage/).
 Web SQL database: This provides access to a SQLite-like database,
which is a client-side alternative to a traditional RDBMS that you might
find on a server (see http://w3.org/TR/webdatabase/).
 Indexed database: A draft specification that has been proposed by the
W3C to replace the currently implemented Web SQL database
specification, geared towards providing a “database of records
holding simple values and hierarchical objects” (see

http://w3.org/TR/IndexedDB/).

Both localStorage and sessionStorage implement Storage interface & provides the following methods:
getItem,setItem,removeItem,clear.
you can simply save a stringt:
localStorage.setItem(‘lala’,”lalala”);
localStorage.setItem(‘lala’,{la1:”lalala”,la2:”lalala”});//we cannot do this,we can serialize your object first and then save them as strings…

Android Web App开发学习笔记(2)

Mobile-orient HTML

add viewport meta tag:
<meta name=”Viewport” content=”width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;” /></pre>

The improved title appearance(like this,the css code is below)
h5{
background:-webkit-gradient(linear,left top,left bottom,
color-stop(0.0,#666),color-stop(0.5,#3a3a3a),
color-stop(0.5,#222),color-stop(1.0,#000));
-webkit-box-shadow:0 2px 1px #aaa;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
padding:0.8em 5px;
color:#fff;
}
coding for defferent screen sizes

instance:
<link media=”only screen and (max-device-width:480px)” href=”smallscreen.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (min-device-width:481px)” href=”largescreen.css” type=”text/css” rel=”stylesheet” />

detect device orientation changes
//代码仅适用webkit内核,detect orientation information
window.onload=function(){
var canDetect="onorientationchange" in window,orientationTimer;
window.addEventListener(canDetect?"orientationchange":"resize",function(evt){
clearTimeout(orientationTimer);
orientationTimer=setTimeout(function(){
console.log(evt.type);//display the event type
console.log(window.orientation);//display the window's orientation
console.log(window.innerWidth);//display the window's width
console.log(window.innerHeight);//display the window's height
var aspectRatio=1,orientation,rotationText=null,ROTATION_CLASSES={
"0":"none",
"90":"right",
"-90":"left",
"180":"flipped"
};
if(window.innerHeight!==0){
aspectRatio=window.innerWidth/window.innerHeight;
}
var orientation=aspectRatio<=1?"portrait":"landscape";
if(evt.type=="orientationchange"){
rotationText=ROTATION_CLASSES[window.orientation.toString()];
}
console.log(orientation)//display the window's orientation calss
console.log(rotationText)//display the window's rotation class
},500);
});
}

Android Web App开发学习笔记(1)

getting started

first just collect Tips:

Bridging Frameworks:  which provides developers a technique for building web apps that can be deployed to mobile devices.The framework alse provides access to portions of the native device capabilities(accelerometer & camera) through a wrapper (usually JavaScript) to the native API.

Connectivity:  in simple terms a mobile device can have three levels of connectivity that gives a satistying user experience:  higer-bandwidth connection(WIFI),lower-bandwidth connection(3G),Limited of no connectivity(offline).(OS version >=1.5 support,browser access need bridge)

Touch:  Web app only allow access to single-touch events at this stage.(OS version >=1.5 support,browser can partial access)

Geolocation:  Android OS supports geographical location detection through various different inplementations:  GPS,cell-tower triangulation,IP sniffing or HTML5 Geolocation API.(OS version >=1.5 support,browser can access)

HardWare Sensor:  PhoneGap(the briding framework now i use) support Accelerometer,Orientaion,Temperature.(OS version >=1.5 support,browser access need bridge)

Local Datebases and Storage:  Android implements support for SQLite(becoming the de facto standard for embedded database),with HTML5 Web Storage,provide some excllent tools to help make you app work in offline situations.(OS version >=1.5 support,browser can access)

Camera Support: bridgiing framework can provide web apps access to the camera and picture library on the device.(OS version >=1.5 support,browser access need bridge)

Messaging and Push Notifications:  it’ll probably be some time before the bridging frameworks implement this for Android.(OS version >=2.2 support,browser can not access)

Webkit Browser:  both Android and iPhone implement a native Webkit browser which given HTML5 and CSS3.

Process Management: is handled similarly on Android and iOS devices since Apple’s release of iOS 4,both have background processing ability.

prepare the develop environment

just need basic components:text editor,web server,android emulator(or handset)

IOS触摸触发事件

在ios中web页面的dom元素可以接收触摸事件,触发的相关过程如下:

第一根手指放下

1、触发touchstart

第二根手指放下

2、触发gesturestart
3、触发第二根手指的touchstart
4、触发gesturechange

手指移动

5、持续触发gesturechange

第二根手指提起

6、触发gestureend,不再触发gesturechange
7、触发第二根手指的touchend
8、触发touchstart!

提起第一根手指

9、触发touchend

明日启程

哟嘿,临睡前写篇文,不知道题目是啥意思。反正也没啥人看,记录玩玩了~~

先想几个要点吧,发现最近思绪总是紊乱,要点是:什么是生活,工作上出了那些问题,和关于你想要的作为。

觉得程序员的生活让我越来越孤僻了还是不会交流了,可能本来就性格不那么舒坦。现在想想生活是什么,我大老远跑北京来为了什么,让我回忆一下。。。现在感觉身上有点酸痛,我来是为了能提高自己的技术,拿高薪水,然后找个好老婆。然后过好日子,但是北京的房租真的贵的说,工作了快3年了,居然几乎啥都没有剩,还是单身,我了个去,还有比这样的人更失败的么,赶紧先解决单身然后放心的奋斗了,以后一定要把握每一次结束单身的机会,哈哈,貌似现在被逼的有点会了呀,以前我好笨的。当然这不是生活的全部,只是看起来正常点,生活也不是拿很高的薪水,因为我心里一直有一句自认为很有道理的话:如果周围没有好的东西让你买的话,你要那么多钱干嘛呀,你拼死拼活的赚了很多钱,但买来的都是别人仅仅是为了赚钱而生产的东西,真没劲。有时候钱能够你活下去就挺好了。接下来,我们会遇到一种面子问题,我们会在朋友中比较财富,更多的财富会让你更自我感觉良好,对那些更富有的人,我们可能会有种羡慕在里面,希望自己能变成那样,可以生活的更惬意。嗯。。。好像没什么问题。。。可能是我困了,忘了以前为什么讨厌为了面子而活着了,哦,不能仅仅为了这个,应该有自己的梦想。。梦想有哪些呢,物质和精神,现在物质社会,前者可能多点,但是物质满足后,应该朝着精神方面了吧。精神方面。。。不知道是什么,那些学围棋,学琴,学画画的,当初的初衷是什么呢,还是陶冶情操,这是干嘛的。。。有时候真的想不明白,你看见一个人很牛的在那弹琴,你想的是什么呢?“哇,他好厉害啊”,我要是会弹就好了,你会了之后,你希望什么呢,希望有人能发现你的琴技,满足自己的虚荣了。但这是为了什么呢。。。额,还是留着以后想吧,今天太困了。还是记录下自己工作的问题。

工作到现在,忽然发现工作真的是个奇怪的玩意,我现在感觉自己很闲额,整个月就那么点事做,可能我的交流有点问题,我的脑袋感觉不太善于跟别人开玩笑,别人在笑的时候我会很长时间不知道笑点在哪,我觉得好笑的事情,别人好像没什么感觉,自己也就笑不起来了。但是拿的薪水还是不算低了,都没做什么事,这钱拿的我很忐忑啊~~我可能是个是个适合创业的人,这一两年内就开始做吧,钱不过是过眼烟云,现在努力赚点做点事业看看,还是那句话,生命只有一次,不要太平凡,我的生活就是闯闯闯。学会沟通是必须的,我发现自己真的不太喜欢跟别人莫名其妙的说话,我是个挺无聊的人,或者说‘闷骚’的人,TMD,大学他们都这样叫我。其实多沟通不就是明骚么,但是人家不好意思明骚怎么办呢,唉。明天争取能都明骚一两次,T_T~~越来越觉得自己像神经病了,我要转行了,电脑辐射太大了。

我有几个想做的事,一开始想自己设计网站然后帮别人做,也就是个网站设计和制作工作室,现在有点这个技术,虽然觉得自己还是很菜,没有机会锻炼,我知道这是自己的借口,不过真的不喜欢熬夜~~觉得页面仔赚不了,还很累的说,现在在公司要移动应用开发,好像也没接触多少东西,我这个前端在这里很鸡肋,我自己都觉得没劲了。自己也在学这方面的东西,新的东西真的很多,我不能把自己埋里面了,市场有么,我觉得潜力好像不是很多,现在我们国家还是穷人很多,富人我不知道他们喜不喜欢整天抱着手机玩,还是开车,泡妞,旅游,打高尔夫有意思点吧,我开玩笑的,我也不知道,还是有很多白领玩的,我也是么,我好弱势呀,泪横流。我们想做智能家居,我现在觉得我对这世界接触太少,这个感觉实施起来没有那么容易。路在哪里呢?最后还是对自己个忠告结束吧,快写了一个小时了。。。任何行动都是要有目标的,自己要决定好自己的目标,不要被性格的懦弱羁绊,世间已是这样了,梦还是要去追的。

你不可不知道的西方典故

▲潘多拉的盒子

潘多拉是希腊神话中第一个尘世女子。普罗米修斯盗天火给人间后,主神宙斯为惩罚人类,命令神用黏土塑成一个年轻美貌、虚伪狡诈的姑娘,取名“潘多拉”,意为“具有一切天赋的女人”。并给了她一个礼盒,然后将她许配给普罗米修斯的弟弟埃庇米修斯(意为“后知”)。埃庇米修斯不顾禁忌地接过礼盒,潘多拉趁机打开它,于是各种恶习、灾难、疾病和战争等立即从里面飞出来了。盒子里只剩下唯一美好的东西:希望。但希望还没来得及飞出来,潘多拉就将盒子永远地关上了。故此“潘多拉的盒子”常被用来比喻造成灾害的根源。

▲第二十二条军规

“如果你能证明自己发疯,那就说明你没疯”。源出美国作家约瑟夫·赫勒1961年根据自己在第二次世界大战中的亲身经历创作的黑色幽默小说《第二十二条军规》。这部小说太有影响了,以至于在当代美语中,“第二十二条军规”已作为一个独立的单词,使用频率极高,用来形容任何自相矛盾、不合逻辑的规定或条件所造成的无法摆脱的困境、难以逾越的障碍,表示人们处于左右为难的境地,或者是一件事陷入了死循环,或者跌进逻辑陷阱等等。

▲阿基里斯之踵

希腊神话英雄阿基里斯唯一能被刺伤的地方。他出生后,母亲海洋女神西蒂斯握着他的脚跟在冥河里浸泡,因此他全身除脚踵外其他地方刀枪不入。比喻易受伤害的地方或致命弱点。

▲奥吉亚斯的牛圈

出自希腊神话。奥吉亚斯是海神的儿子,他养了无数的牛,粪秽堆积如山。比喻累积成堆或肮脏腐败的难以解决的问题。

▲布利丹毛驴

出自14世纪法国哲学家布利丹的寓言。有一头饥饿毛驴站在两捆同样的干草之间,居然不知吃那边的干草才好,结果饿死了。比喻那些优柔寡断的人。

▲皮格马利翁效应

皮格马利翁是希腊神话中的塞浦路斯国王。他憎恨女性,决定永不结婚。他用神奇的技艺雕刻了一座美丽的象牙女像,并爱上了她。他像对待自己的妻子那样抚爱她,装扮她,并向神乞求让她成为自己的妻子。爱神阿芙洛狄忒被他打动,赐予雕像生命,并让他们结为夫妻。“ 皮格马利翁效应”后来被用在教育心理学上,也称“期待效应”或“罗森塔尔效应”,比喻教师对学生的期待不同,对他们施加的方法不同,学生受到的影响也不一样。

▲多米诺骨牌

是一种西洋游戏。将许多长方形的骨牌竖立排列成行,轻轻推倒第一张牌后,其余骨牌将依次纷纷倒下。用于比喻时,“多米诺骨牌效应”常指一系列的连锁反应,即等同于人们所说的“牵一发而动全身”之意。

▲达摩克利斯剑

达摩克利斯是希腊神话中暴君迪奥尼修斯的宠臣,他常说帝王多福,以取悦帝王。有一次,迪奥尼修斯让他坐在帝王的宝座上,头顶上挂着一把仅用一根马鬃系着的利剑,以此告诉他,虽然身在宝座,利剑却随时可能掉下来,帝王并不多福,而是时刻存在着忧患。后来人们常用这一典故来比喻随时可能发生的潜在危机。

▲鳄鱼的眼泪

西方传说,鳄鱼捕到猎物时,一边贪婪地吞噬,一边假惺惺地流泪。喻指虚假的眼泪,伪装的同情。又被引申为一面伤害别人,一面装出悲天悯人的阴险狡诈之徒。

▲犹大的亲吻

犹大是《圣经》中耶稣基督的亲信子弟12门徒之一。耶稣传布新道虽然受到了百姓的拥护,却引起犹太教长老司祭们的仇恨。他们用30个银币收买了犹大,要他帮助辨认出耶稣。他们到客马尼园抓耶稣时,犹大假装请安,拥抱和亲吻耶稣。耶稣随即被捕,后被钉死在十字架上。人们用“犹大的亲吻”比喻可耻的叛卖行为。

▲斯芬克斯之谜

斯芬克斯是希腊神话中以隐谜害人的怪物,埃及最大的胡夫金字塔前的狮身人面怪兽就是他。他给俄狄浦斯出的问题是:什么东西早晨用四只脚走路,中午用两只脚走路,傍晚用三只脚走路?俄狄浦斯回答:是人。在生命的早晨,他是个孩子,用两条腿和两只手爬行;到了生命的中午,他变成壮年,只用两条腿走路;到了生命的傍晚,他年老体衰,必须借助拐杖走路,所以被称为三只脚。俄狄浦斯答对了。斯芬克斯羞愧坠崖而死。“ 斯芬克斯之谜”常被用来比喻复杂、神秘、难以理解的问题。

▲山姆大叔

美国的绰号,产生于1812年美英战争时期。纽约州一位诚实能干的肉类包装商被人们亲切地称为“山姆大叔”。他担任纽约州和新泽西州的军需检验员,负责在供应军队的牛肉桶和酒桶上打戳。人们发现该厂的牛肉桶上都盖有E.A—U.S.标记。本来,E.A是一个军火承包商的名字,U.S是美国的缩写。碰巧山姆大叔(UncleSam)的缩写与美国的缩写相同,人们就管美国叫“山姆大叔”。美国人把“山姆大叔”诚实可靠、吃苦耐劳以及爱国主义精神,视为民族的骄傲和共有的品质。1961年,美国国会正式承认“山姆大叔”为美国的民族象征。

▲酸小姐

出自俄国作家波米亚洛夫斯基的小说《小市民的幸福》。女主人公莲诺奇卡是一个目光短浅,精神空虚的“千金小姐”。由于失恋而成为忧心忡忡、痛苦悲伤的“酸小姐”。后比喻矫揉造作、装腔作势的女子。也泛指目光短浅、思想庸俗或感情脆弱、喜怒无常的人。

▲诺亚方舟

出自《圣经》。上帝对人类所犯下的罪孽非常忧虑,决定用洪水消灭人类。而诺亚是个正直的人,上帝吩咐他造船避灾。经过 40 个昼夜的洪水,除诺亚一家和部分动物外,其他生物都被洪水吞没了。后来人们常用此语比喻灾难中的避难所或救星。

▲乌托邦

源出希腊文ou(无)和topos(处所),意即“乌有之乡”。1516年,英国空想社会主义者莫尔在其《乌托邦》一书中,描述了一个他所憧憬的美好社会,即乌托邦。那里一切生产资料均归全民所有,生活用品则按需分配;人人都从事生产劳动,并有充足的时间供科学研究和娱乐;那里没有酒店、妓院,也没有堕落和罪恶……故此词喻指根本无法实现的理想或空想的美好社会。

▲伊甸园

出自《圣经》。上帝在东方的一片富饶的平原上开辟了一个园子,里面有果树和各种飞禽走兽。上帝让亚当看守园子。为排解他的寂寞,上帝从亚当的身上取出一根肋骨,造成一个女人—— 夏娃来陪伴他。他们过着无忧无虑的日子。于是人们往往用“伊甸园”来比喻人间的乐园。

▲禁果:
出自《圣经》。亚当和夏娃住在伊甸园中,上帝允许他们食用园中的果实,唯独“知善恶树”上的果实不能吃。狡猾的蛇引诱他们吃了禁果,从此他们懂得了善恶,辨别出真假,而且产生了羞耻之心。上帝因此将他们逐出伊甸园。禁果比喻被禁止得到而又渴望得到的东西。

▲超人

出自尼采《查拉图什特拉如是说》。尼采认为“超人”是代表统治阶层的理想化的无所不能的全才人物。他说:“一个人是可以使千万年的历史生色的 ——也就是说,一个充实的、雄厚的、伟大的、完全的人,要胜过无数残缺不全、鸡毛蒜皮的人。”比喻那些自己凌驾于一切之上的、自命不凡的利己主义者,也指那些能力卓异、超越常人的人。

▲安泰

“安泰”是希腊神话中的巨人和英雄,是海神波塞冬和地神盖娅的儿子。他的力量来源于大地母亲,只要身不离地,就力量无穷,所向无敌;如果身体离开了大地母亲,就会失去生存能力。后来,安泰被希腊神话中最伟大的英雄赫拉克勒斯举在空中击毙了。因为安泰是个离开大地母亲就失去力量的巨人,所以,后来人们在写文章时就常用“安泰”来比喻作家、诗人以及革命政党不能脱离人民群众。

▲洗礼

出自《圣经》。人类的始祖亚当和夏娃因听了神蛇的话,偷吃禁果犯下了罪,这个罪从此代代相传,叫做“原罪”;各人违背上帝旨意也会犯罪,称为 “本罪”。所以,凡笃信上帝的人,必须经过洗礼,洗刷原罪和本罪。洗礼时,主洗者口诵经文,受洗者注水额上或头上,也有全身浸入水中的,故洗礼也称“浸洗”。后比喻经受某种锻炼或考验。

▲泥足巨人

典出《圣经·旧约》。说的是巴比伦王尼布甲尼撒梦见一尊巨像,其头是精金的,胸臂是银的,腰肚是铜的,腿是铁的,脚是半铁半泥的。他正观看着,忽然天外飞来一块石头击碎巨像的泥足,于是金银铜铁泥同化为粉末。后来人们常以“泥足巨人”来形容外强中干、色厉内荏的庞然大物。

▲香格里拉

典出英国小说家詹姆斯?希尔顿的名著《失业地平线》。书中描述了在中国喜马拉雅山山脉延伸到巴基斯坦的一个小山麓里,有一处美得像童话里仙境的地方叫香格里拉。在那里男女不问世事,不知困苦,也没有疾病和暴力,如同陶渊明笔下的世外桃源一样。人们常用“香格里拉”来喻指世外仙境,也指避世隐居的地方。

▲滑铁卢

1815年,在比利时的滑铁卢,拿破仑率领法军与英国、普鲁士联军展开激战,法军惨败。随后,拿破仑被囚禁在大西洋中的圣赫勒拿岛上,直到1821年病故。因而,人们常常用“滑铁卢”来比喻惨痛的失败和比喻英雄末路。

▲象牙塔

典出19世纪法国诗人、文艺批评家圣佩韦·查理·奥古斯丁的书函《致维尔曼》。奥古斯丁批评同时代的法国作家维尼作品中的悲观消极情绪,主张作家从庸俗的资产阶级现实中超脱出来,进入一种主观幻想的艺术天地——象牙之塔。于是“象牙塔”就被用来比喻与世隔绝的梦幻境地。现在也有人把大学说成是“象牙塔”。

▲缪斯

典出希腊神话。缪斯是希腊神话中9位文艺和科学女神的通称。她们均为主神和记忆女神之女。她们以音乐和诗歌之神阿波罗为首领,分别掌管着历史、悲剧、喜剧、抒情诗、舞蹈、史诗、爱情诗、颂歌和天文。古希腊的诗人、歌手都向缪斯呼告,祈求灵感。后来,人们就常用“缪斯”来比喻文学、写作和灵感等。

▲涅槃

典出佛教典籍。也称“般涅槃”,意译“入灭”“圆寂”。为佛教全部修习所要达到的最高理想。一般指通过修持断灭“生死”轮回而后获得的一种精神境界。佛教认为,信佛的人,经过长期“修道”,即能“寂(熄)灭”一切烦恼和“圆满”一切“清净功德”。这种境界,名为“涅槃”。在佛教史籍中,通常也作为死亡的代称。后来,人们在写文章时就把“涅槃”作为“死亡”的代称来使用。

完全摘自:http://hi.baidu.com/xxkln/blog/item/fde3152de7737426359bf742.html

document一些列宽度和高度的区分

在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到
document.body.scrollTop在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document.documentElement来取代document.body,可以这样写
例:

var top = document.documentElement.scrollTop || document.body.scrollTop;
//在javascript里||是个好东西,除了能用在if等条件判断里,还能用在变量赋值上。那么上例等同于下例。例:
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

这么写可以得到很好的兼容性。
相反,如果不做声明的话,document.documentElement.scrollTop反而会显示为0。

得到各个属性如下:

document.body.clientWidth; //网页可见区域宽
document.body.clientHeight; //网页可见区域高
document.body.offsetWidth  //网页可见区域宽 (包括边线的宽);
document.body.offsetHeight //网页可见区域高 (包括边线的宽);
document.body.scrollWidth; //网页正文全文宽
document.body.scrollHeight; //网页正文全文高
document.body.scrollTop; //网页被卷去的高
document.body.scrollLeft; //网页被卷去的左
window.screenTop; //网页正文部分上
window.screenLeft; //网页正文部分左
window.screen.height; //屏幕分辨率的高
window.screen.width; //屏幕分辨率的宽
window.screen.availHeight; //屏幕可用工作区高度
window.screen.availWidth; //屏幕可用工作区宽度

scrollHeight  //获取对象的滚动高度。
scrollLeft //设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop //设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth //获取对象的滚动宽度
offsetHeight //获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft //获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX //相对文档的水平座标
event.clientY //相对文档的垂直座标 

event.offsetX //相对容器的水平坐标
event.offsetY //相对容器的垂直坐标
document.documentElement.scrollTop //垂直方向滚动的值
event.clientX+document.documentElement.scrollTop //相对文档的水平座标+垂直方向滚动的量

//要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
//而不是:
document.body.scrollTop;
documentElement //对应的是 html 标签,而 body 对应的是 body 标签。

在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候,请加上这样的判断

if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
    top=document.body.scrollTop;
    left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
}

本文直接摘自:http://j2ee-chenwei.javaeye.com/blog/460340

 

后补:可将获取页面的滚动条坐标位置封装:

function getScroll(){
return [
  document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset || 0,
  document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0
];
}

减少dom reflow

reflow是指:浏览器为了重新渲染部分或整个页面,而重新计算页面元素位置和几何结构的过程。
触发reflow的用户操作何DOM变化有:调整浏览器窗口的大小,使用javascript计算样式,在DOM中创建或删除元素,改变元素的class等,有些操作可能多次触发reflow。现代浏览器在控制reflow次数方面做的越来越好了。
减少reflow的原则:
减少不必要的DOM层级。改变DOM树中的一级会导致所有层级的改变,上至根部,下到被改变节点的子节点。
复杂的表现变化,如动画,让他脱离文档流,用绝对定位或者fixed定位来完成。
避免不必要的复杂CSS选择器,尤其是后代选择器,匹配选择器将耗费更多的CPU。

摘自:http://www.webjx.com/html-xhtml/webxhtml-17225.html

技术支持: WordPress | 主题: Motion 作者: 85ideas 修改: .
[ 回到顶部 ]