JavaScript 放大镜是我成为前端后写的第一个组件, 从中学到了很多东西. 现在已经过去超过半年, 我希望能在自己仍有印象的时候, 整理和重新思考其中的一些处理方法, 将它改进, 并将这些想法写出来.
放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScript 放大镜系列的文章, 每次讲一个点, 由点及面, 最后完成整个效果.
本次我们先了解如何在缩略图上移动镜片. (这是 DEMO)
用 JS 计算鼠标在页面上的位置并非难事, 只要把握好各浏览器的区别就可以轻易算出鼠标位置. (这是 DEMO)
视窗 (浏览器可视窗口) 就像是页面上的掩板开了一个洞. 滚动条可以改变页面和视窗之间的偏移量, 从而可以通过视窗看到页面的各个位置.
鼠标在页面上的位置 = 页面和视窗之间的偏移量 + 鼠标在视窗中的位置
右图中的 cursorX 和 cursorY 分别是鼠标在视窗中的横向和纵向位置, scrollY 是页面和视窗之间的纵向距离. 当然, 当视窗宽度小于页面宽度的时候, 还会存在 scrollX. 那么鼠标在页面上的位置就是: (scrollX+cursorX, scrollY+cursorY)
IE 以外的浏览器 (本人测试过 Firefox 3.6, Opera 10.10, Chrome 4.1 和 Safari 4.0.4) 均可以通过 pageXOffset 和 pageYOffset 来获取页面和视窗间的横纵距离. 但 IE (本人测试过 IE6, IE7, IE8) 只能通过滚动位移来获取页面和视窗间的距离, 并存在一到两个像素的偏离.
今年年初, 我一直纠结于一个问题, 为什么我们的网站现在用 950px 布局, 而不是经典的 960px 布局?
记得大概一年前, 我到学校给师弟妹们讲网页布局的时候, 还以 Alibaba.com 为例引出 960 经典布局. 960 的最大好处是什么? 它是 2, 3, 4, 5, 6, 8, 10, 12, ... 很多常用的分栏和 gallery 分列数量的公倍数. 如果采用通栏布局, 那么我们可以轻松地算出每列的宽度.
前几天在做一个项目, 通栏无边框布局, 分 4 列, 如果我们的宽度是 960, 那我可以将列宽定义为 25%. 但就现在的 950, 我需要加一个外边距, 并将其一并算入, 如果列宽是 x, 外边距是 y, 那么 4x + 3y = 950.
制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.
上周我 (作者) 发了一个关于 CSS3 下拉菜单的文章, 有些同学抱怨我没有对 CSS 代码进行详细的说明. 那好, 本文将普及一些新属性的基本知识: text-shadow, box-shadow, and border-radius. 这些 CSS3 属性经常被用来增强页面布局, 并且很容易理解.
前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明)
本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
不久之前, 我介绍了一个使用 WordPress 原生缩略图的小技巧, 关于如何使用 WordPress 上传图片生成的缩略图作为文章列表中的预览图, 并且留下了两个问题给同学们思考, 第一个问题是:
如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 可以用 CSS 实现...
跟帖中有同学给出了一些解决办法, 都说得很好, 但是我还是想说说自己常用的处理办法. 我这也不是什么高明的办法, 5 年前就有人在用, 但它方便快捷.
有这么一些字符 (如: 小于号和大于号) 是 HTML 中的保留标记. 为了以文本方式显示这些字符, 你必须在源代码中输入 HTML 字符实体. 例如: 可以通过输入 < (实体名) 或者 < (实体编号) 来显示小于号 (<). 在字符实体的列表里, 有非常多符号可以用在页面布局的设计中. 例如: → ♥ ♫ ✓ ✗ • ☞ ✁ ★ “ ⊕. 你以前是否已经见过雪人 ☃ 符号? 如果没有, 请继续阅读, 本文将给你更多惊喜.
1. 加载速度快, 因为字符都是基于文本的.
2. 可以更具字体尺寸进行缩放.
3. 可以方便地改变颜色和改变造型.
最近在编写 CSS 的过程中, 发现 W3C 组织对 background-position 的验证有所调整, 虽然只是个小变动, 但可能影响很多人的编码习惯, 所以我决定提出来讲讲.
我们先来看看 W3C 对 background-position 的定义, 值的编写规则如下:
jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown 和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.
如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...
不知道本博客的老读者是否记得我写过的一个关于菜单导航的专题, 其中一节讨论的是滚动导航菜单的实现方法 (演示页面), 实现了类似 slideUp 和 slideDown 的效果, 但是不存在上述问题, 因为它的滚动高度是即时计算的, 而 jQuery 作为一个通用框架应用的面很广, 很难做到这一点.
在平时工作中, 我们环绕需求设计页面结构, 样式和效果, 做成 DEMO, 再交付开发工程师套用并做成动态页面. 但是在交付工程师时, 我发现自己的思维方式和别的前端有点不一样. 我有时会在自身角度去思考, 误认为对方也熟知某些技巧, 其实不然.
上星期, 我在找 "奇迹 MU" 游戏中出宝石的声音文件, 想用这个作为铃声. 我找遍了整个网络, 人们都告诉我, 可以在游戏的安装文件夹内找到某某文件, 将这个文件转格式就可以用了. 我很纠结, 好像除此之外再没有可以得到这个文件的办法了, 但我又不愿意为了不到 1KB 的一个文件去安装 G 量级的软件. (最后, 我在某国外网站找到了这个文件.)
对工程师来说, 他们或许对这个并不熟悉, 如果你告诉他需要学很多与其核心工作不相关的东西, 他们同样会很纠结. 所以作为前端, 应该尽量将前台的处理进行封装. 可能我说得不是很明白, 下面用 Rating Stars 举例说明一下.
干前端这行当已经超过一个月了, 每天都会遇到新奇古怪, 甚至离奇的问题. 虽然绝大部分都是一些小问题, 但我觉得还是有必要记录下来.
今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行)
你是否已经对现在的柱形和框框布局感到厌烦? 是时候学一下如何冲出盒子的束缚, 做一些有创造性的东西出来了. 以前, 我收集了一些几乎完美的设计都是盒式的. 这次我将会提供一些带演示文件速成的 CSS 技巧, 让大家知道如何突破框框设计, 发挥创意, 使用图片和 CSS 位置属性.
为了提高网页的用户体验, 我们经常会做一些对搜索引擎不太友好的事情, 但某些情况下这并不是无法挽回的, 可以通过向自然人和搜索引擎机器人显示不同的内容来提供好的用户体验和 SEO.
听说本方法会触犯搜索引擎的一些操作原则, 有可能被被各搜索引擎处罚, 甚至删除网站. 所以我刚刚已经撤下这样的处理, 直到确定其不属于作弊. 有魄力的朋友可以继续使用, 但后果自负.
本博客的首页和存档页面以列表的形式显示文章, 在访客点击展开文章时才加载文章的内容. 因为文章的内容部分包含了大量的文字和图片, 需要大量的加载时间和流量. 尽快地向访客展示网页可以挽留大量的来访者. 而对于手机用户来说, 加载时间和流量则更为重要.
一般来说, 网站的首页是搜索引擎访问最多的页面, 应该尽可能的向它们展示有意义的内容, 但是要以列表的形式显示文章的话, 访客和搜索引擎只能获取到文章标题信息. 文章内容或者摘要 (尤其是文章的第一句) 对于 SEO 来说是极其重要的, 所以我们要设法向爬虫发送这些内容.
JavaScript 是很好的发明, 它让网页动了起来. 大家都喜欢这样的那样的页面效果, 所以 JS 的使用日益广泛, 甚至被依赖. 但你务必提醒自己, 绝大多数的浏览器都支持 JavaScript, 但不是全部.
上一篇文章中我简单地讲解了如何使用 JavaScript 实现滑动置顶效果. 那段调用 JS 代码的 HTML 片段曾经被我修改过两次. 这次我们将会以它为例, 讲解为什么不能完全依赖 JavaScript 并如何进行处理.