杰拉斯的博客
[实用小代码]网页中的各种长宽、坐标
杰拉斯 | 时间:2013-08-28, Wed | 20,373 views前端开发
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网页中的各种长宽、坐标</title> </head> </head> <body onmousemove="getXandY()"> <label>window.event.clientX:</label><label id="xa" class="xy"></label><br /> <label>window.event.clientY:</label><label id="ya" class="xy"></label><br /> <label>window.event.x :</label><label id="xb" class="xy"></label><br /> <label>window.event.y :</label><label id="yb" class="xy"></label><br /> <label>window.event.screenX:</label><label id="xc" class="xy"></label><br /> <label>window.event.screenY:</label><label id="yc" class="xy"></label><br /><br /> <label>window.screen.height:</label><label id="screenHeight" class="xy"></label><br /> <label>window.screen.width:</label><label id="screenWidth" class="xy"></label><br /><br /> <label>window.document.body.clientHeight:</label><label id="ch" class="xy"></label><br /> <label>window.document.body.clientWidth:</label><label id="cw" class="xy"></label><br /> <label>window.document.body.clientLeft:</label><label id="cl" class="xy"></label><br /> <label>window.document.body.clientTop:</label><label id="ct" class="xy"></label><br /><br /> <label>window.document.body.scrollHeight:</label><label id="sh" class="xy"></label><br /> <label>window.document.body.scrollWidth:</label><label id="sw" class="xy"></label><br /> <label>window.document.body.scrollLeft:</label><label id="sl" class="xy"></label><br /> <label>window.document.body.scrollTop:</label><label id="st" class="xy"></label><br /><br /> <label>window.document.body.offsetHeight:</label><label id="oh" class="xy"></label><br /> <label>window.document.body.offsetWidth:</label><label id="ow" class="xy"></label><br /> <label>window.document.body.offsetLeft:</label><label id="ol" class="xy"></label><br /> <label>window.document.body.offsetTop:</label><label id="ot" class="xy"></label><br /> <script type="text/javascript"> function getXandY(){ var Xa = window.event.clientX; var Ya = window.event.clientY; document.getElementById("xa").innerHTML = Xa; document.getElementById("ya").innerHTML = Ya; var Xb = window.event.x; var Yb = window.event.y; document.getElementById("xb").innerHTML = Xb; document.getElementById("yb").innerHTML = Yb; var Xc = window.event.screenX; var Yc = window.event.screenY; document.getElementById("xc").innerHTML = Xc; document.getElementById("yc").innerHTML = Yc; var screenHeight = window.screen.height; var screenWidth = window.screen.width; document.getElementById("screenHeight").innerHTML = screenHeight; document.getElementById("screenWidth").innerHTML = screenWidth; var clientHeight = window.document.body.clientHeight; var clientWidth = window.document.body.clientWidth; var clientLeft = window.document.body.clientLeft; var clientTop = window.document.body.clientTop; document.getElementById("ch").innerHTML = clientHeight; document.getElementById("cw").innerHTML = clientWidth; document.getElementById("cl").innerHTML = clientLeft; document.getElementById("ct").innerHTML = clientTop; var scrollHeight = window.document.body.scrollHeight; var scrollWidth = window.document.body.scrollWidth; var scrollLeft = window.document.body.scrollLeft; var scrollTop = window.document.body.scrollTop; document.getElementById("sh").innerHTML = scrollHeight; document.getElementById("sw").innerHTML = scrollWidth; document.getElementById("sl").innerHTML = scrollLeft; document.getElementById("st").innerHTML = scrollTop; var offsetHeight = window.document.body.offsetHeight; var offsetWidth = window.document.body.offsetWidth; var offsetLeft = window.document.body.offsetLeft; var offsetTop = window.document.body.offsetTop; document.getElementById("oh").innerHTML = offsetHeight; document.getElementById("ow").innerHTML = offsetWidth; document.getElementById("ol").innerHTML = offsetLeft; document.getElementById("ot").innerHTML = offsetTop; } </script> </body> </html>
收集整理自网上
[常用布局]左栏固定宽度,右栏自适应的两种纯CSS方法
杰拉斯 | 时间:2013-08-26, Mon | 34,197 views前端开发
其一,左栏固定宽度,右栏自适应之绝对定位法:
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度,右栏自适应之绝对定位法</title> <style type="text/css"> body{ margin: 0; } #nav{ top: 0; left: 0; width: 230px; height: 600px; background: #ccc; position: absolute; } #main{ height: 600px; margin-left: 230px; background: #0099ff; } </style> </head> <body> <div id="container"> <div id="nav"> 左栏 </div> <div id="main"> 右栏 </div> </div> </body> </html>
看起来很美好,但是。。
由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况
[转载]jQuery最佳实践
杰拉斯 | 时间:2013-08-24, Sat | 18,582 views前端开发
上周,我整理了《jQuery设计思想》。
那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQuery"。
我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks)。他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值。
[转载]jQuery设计思想
杰拉斯 | 时间:2013-08-23, Fri | 19,526 views前端开发
jQuery是目前使用最广泛的javascript函数库。
据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。
虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的《jQuery基础》(jQuery Fundamentals)。在Google里搜索"jQuery 培训",此书排在第一位。jQuery官方团队已经同意,把此书作为官方教程的基础。
这本书虽然是入门教材,但也足足有100多页。我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从手册中找到具体的写法。
下面就是我的笔记,它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识,就能看懂它,在最短的时间里,掌握jQuery的所有主要方面(除了ajax和插件开发)。
7个罕见视频告诉你:乔布斯如何Think Different
杰拉斯 | 时间:2013-08-10, Sat | 9,040 views心路历程
乔布斯是一个出色的多面手——在科技,营销和管理上都才干过人。其成功归于方方面面的因素,但有一点毋庸置疑:他与众不同的思维视角。以下是乔布斯鲜为人知的7个视频,让我们绕到他著名的座佑铭“stay hungry, stay foolish”背后看下吧。