Ruby's Louvre

每天学习一点点算法

导航

2009年8月6日 #

新的图像替换技术:状态区域法(The State Scope Method)

摘要: 感谢蓝色理想的dishuipiaoxiang的译文,让我了解到这种崭新的图片替换方法。注意,是图片替换而是图片轮换。相信每一个WEB设计师都要经常用到它!当我们要用到一些特别的字体做LOGO,商标与Banner时,为了解决用户机不存在这种字体时就只有用图片替代或者使用sIFR方案(@face与eot字体都不靠谱),当然前者是比后者常用得多,也简单得多。而图片替换大法分很多种,如直接隐藏文字法,ma... 阅读全文

posted @ 2009-08-06 11:12 司徒正美 阅读(3772) 评论(5) 推荐(5) 编辑

2009年8月5日 #

关于图片放大和取得尺寸

摘要: 原贴地址实际应用中,我们经常要处理图片的大小,如放大镜效果。一般来说,我们是不推荐用图片轮转的方法动用两张或多张图片,除非图片放得很大导致失真。现在我们讨论一下如何放大图片。第一种情形,图片的长与高已知,但并非写style里面 function enlarge(el) { el.width = 300; el.height = 240;} 运行代码 改进一下,让其可连续成倍扩大。注意,这里我们利... 阅读全文

posted @ 2009-08-05 18:02 司徒正美 阅读(3210) 评论(4) 推荐(5) 编辑

2009年8月4日 #

一步步教你实现富文本编辑器(第四部分)

摘要: 这部分我将详尽讲述如何插入复杂的html内容与取得编辑光标的位置,顺带完成插入表情的功能。由于IE与FF这两个闹别扭,这两步的实现都是完全不一样的。不说废话了!开始吧!上次我们已经为我们的富文本编辑打造了表格创建器,但还没有绑定事件!我现在分析一下,当我们点击表格创建器的提交按扭,它应该会把其面板上输入的参数传到一个程序去处理,让它生成一个完整的表格的html,然后再插入到光标的所在位置,最后隐藏表格创建器;如果是点击取消按钮,则什么也不做就消失了!那个生成html的程序很简单,我们依然把它做成私有方法: var _createTable = function(rows, cols, wi.. 阅读全文

posted @ 2009-08-04 17:00 司徒正美 阅读(6521) 评论(14) 推荐(17) 编辑

2009年8月2日 #

一步步教你实现富文本编辑器(第三部分)

摘要: 这部分我们把富文本编辑器的代码打包成一个类。至于如何实现没有什么好说的,就是那五种方案,我取用的是原型,那是最JS,也是最ruby的。我们的所有实现都在原型进行,最后new出来就是!构造函数有一个必选参数,就是那个textarea的id,其他都是动态生成的,包括其样式。关于样式,我已提供了一个很好用的addSheet函数了。那么开始吧,我们要尽快做出第二部分最后阶段的样式再说!首先我为大家提供了一个模板,大家可以根据它自行完成我们讲过的部分。 var Class = { create: function() { return function() { this.... 阅读全文

posted @ 2009-08-02 17:44 司徒正美 阅读(8104) 评论(16) 推荐(9) 编辑

2009年8月1日 #

iframe元素用法总结

摘要: iframe是一个非常有用的标签,先不说早期用它来模型Ajax效果,现在富本文编辑器它也绝对是主角。但是它又是一个特别的元素,最早出现IE4.0中,后纷纷被其他游览器吸纳,由于IE不开源,iframe在各游览器中都有很大差异。首先我们看看它在各游览器中拥有什么属性——火狐的iframe的所有属性:scrollWidth, clientLeft, clientHeight, clientWidth, clientTop, getClientRects, getBoundingClientRect, getElementsByClassName, baseURI, textContent, com 阅读全文

posted @ 2009-08-01 22:25 司徒正美 阅读(20547) 评论(21) 推荐(10) 编辑

2009年7月31日 #

一步步教你实现富本文编辑器(第二部分)

摘要: 这部分是利用iframe实现我们的富文本编辑器。上面提到激活编辑模式有两个方法,contentEditable="true"与designMode="On"。contentEditable 是针对单个元素,而designMode是面向整个文档的。因此,当我们使用iframe时,我们得先取到iframe的document。 var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;不过,在这之前,我们首先动态生成iframe,然后再对iframe进行一些样式设置 阅读全文

posted @ 2009-07-31 15:39 司徒正美 阅读(7358) 评论(19) 推荐(14) 编辑

真正的XHTML 2.0模板

摘要: 今天在外国一网址淘到的,不过已经没大用处,就连严格遵守XHTML1规则的网站也不多,今年还听说难产了,人员被调配去搞HTML5!标签还是那些,B标签还能使用,dtd没有看。http://www.w3.org/MarkUp/html-spec/html-spec_3.html#SEC3.4 <?xml version="1.0"?><!DOCTYPE HTML PUBLIC "-/... 阅读全文

posted @ 2009-07-31 10:13 司徒正美 阅读(1612) 评论(5) 推荐(0) 编辑

2009年7月30日 #

一步步教你实现富本文编辑器(第一部分)

摘要: 先打造好毛坯,添加上各位按钮与下拉选择框,如字体、字号、对齐、斜体、加粗、编号、缩进、背景色、前景色……为了方便我们按制样式,按钮是用span模拟的。 <!doctype html><html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type 阅读全文

posted @ 2009-07-30 19:17 司徒正美 阅读(13280) 评论(25) 推荐(8) 编辑

2009年7月29日 #

CSS Expression用法总结

摘要: 转自http://www.chencheng.org/demo/css-expression.phpCSS Expression,动态 CSS 属性,IE 私有,自 5.0 开始引入(IE8 将不再支持),参考 MSDN,不过有时用javascript动态生成它作为IE6的hack还是不错的! 这东西的优点: 使 CSS 属性动态生成,所以基本 js 能干的它都能干 使用 CSS 选择符... 阅读全文

posted @ 2009-07-29 18:37 司徒正美 阅读(10863) 评论(0) 推荐(1) 编辑

一步步教你实现跨游览器的日期选择器

摘要: 由于日历与日期选择器几乎是同一回事,日历部分的讲解我就不重复了,没有看过的朋友可以参看我这篇博文。不过日期选择器有一个难点,就是如何防止在IE6中被下拉开选择框盖住的问题。不但是日期选择器,所有弹出层都有这个问题。这个问题其实网上都有现成的答案注1,最流行的做法就是利用iframe元素了注2。iframe已IE6与IE7中罕有的能遮住select的windowless元素,我们的日期选择器的容器也... 阅读全文

posted @ 2009-07-29 14:32 司徒正美 阅读(5408) 评论(3) 推荐(7) 编辑