原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值.
参数说明:
fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.
核心代码及演示: 查看样例演示

//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
	/*
	 * 参数说明
	 * elem==>需要淡入的元素
	 * speed==>淡入速度,正整数(可选)
	 * opacity==>淡入到指定的透明度,0~100(可选)
	 */
    speed = speed || 20;
    opacity = opacity || 100;
	//显示元素,并将元素值为0透明度(不可见)
    elem.style.display = 'block';
    iBase.SetOpacity(elem, 0);
	//初始化透明度变化值为0
    var val = 0;
	//循环将透明值以5递增,即淡入效果
    (function(){
        iBase.SetOpacity(elem, val);
        val += 5;
        if (val <= opacity) {
            setTimeout(arguments.callee, speed)
        }
    })();
}

//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
	/*
	 * 参数说明
	 * elem==>需要淡入的元素
	 * speed==>淡入速度,正整数(可选)
	 * opacity==>淡入到指定的透明度,0~100(可选)
	 */
    speed = speed || 20;
    opacity = opacity || 0;
    //初始化透明度变化值为0
    var val = 100;
	//循环将透明值以5递减,即淡出效果
    (function(){
        iBase.SetOpacity(elem, val);
        val -= 5;
        if (val >= opacity) {
            setTimeout(arguments.callee, speed);
        }else if (val < 0) {
			//元素透明度为0后隐藏元素
            elem.style.display = 'none';
        }
    })();
}

前端学习书籍推荐

时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.
HTML与CSS阶段书藉选择
对初学都来说,这一阶段应该是XHTML与CSS2的学习. 学习前期, 建议至多看两本书: 《CSS权威指南》《CSS那些事儿》, 有一定CSS基础后, 可以看《精通CSS:高级Web标准解决方案》. 或许你会问,为什么没有HTML学习的书籍, 就我个人立场而言, 在你还没入门前, W3C在线教程或者HTML手册都是你最好的入门书. 前期你需要掌握的HTML知识并不要很多. 简单一点, 你能知道何处该用哪个HTML标签即可. 如果还想简单一点, 可以找一份HTML标签汇总表记下对应的标签(可参考HTML技巧: 语义化你的代码一文的附表) .
对于CSS, 入门的话, 一本CSS2.0手册以及3C在线教程也是你入门首选方法. 入门之后,我非常推荐买一本《CSS权威指南》, 这本书最新版已到第三版. 可以当成参考书, 亦可以是系统学习CSS2.0的书. 这本书该什么时候读呢? 会与不会之间, 阅读这本书你需要对CSS最基础的东西有个了解. 这本书最大的优点便是讲的透彻易懂(对于初学都,这是多么重要), 知识系统全面, 章节也分布的合理. 只要你用心读完这本书之后, 你的CSS水平一定有一个不小的提升. 在此期间, 还可以买一本《CSS那些事儿》, 作为实践用书. 我一直坚信, 任何一门技术, 自己写代码实践永远都是第一要务. CSS基础基本掌握,并有一定的项目经验后, 可以开始读《精通CSS:高级Web标准解决方案》一书, 此书描述比较简洁(我看的是第一版, 据说第二版翻译的比较差劲), 里面有许多实用的项目技巧, 对常用BUG的查找及修复有整章的描述, 书最后还有两个实例介绍, 是本很不错的进阶书籍.
JavaScript与JS库学习
原生JavaScript入门首选, 当然是《JavaScript DOM编程艺术》, 毋庸置疑的经典之作. 前前后后我至少完整的读过三篇, 每次都有不同的收获. 透彻易懂, 表述流畅, 作者一直在用一种极简的文字描述对于初学者来说非常晦涩的理论, 并有完整且并不复杂的样例相辅. 只要你用心读完它, 你就会大概的知识JavaScript是怎么回事. 读过《JavaScript DOM编程艺术 》之后, 很多人推荐看《JavaScript权威指南》, 我个人觉得不妥, 或许对于有程序基础的人来说, 这本书可以相对轻松的读下去, 但对于初学者, 读它无疑是一种挫败感很强的打击, 这本书很全面涵盖的很广, 的确是一本不错的书, 但前期仅是一本工具书而已. 如比让你学英文就直接给你一本牛津词典, 学起来谈何容易. 我个人的推荐是, 学透《JavaScript DOM编程艺术》后(起码对里面的实例自己能独立完成,并且知道所以然), 用一到两个月时间实践JS, 积累一定的知识基础后, 可以开始看《精通JavaScript》, 这是一本进阶的书籍, 也是一本很实用的书, 作者是jQuery之父John Resig, 书中介绍并演示了很多轻量级的功能函数, 并对实现原理有很详细的讲解(书中样例的源码注释也翻译成中文了, 这一点翻译做的很周到). 在这本书之前,《ppk 谈 JavaScript》一书也值得一读, 但我个人而言, 此书让我读起来很不舒服. 全书基本是在9个样例基础上讲的, 里面对JS的可用性与可访问性有很到位的讲解, 但作者将样例都拆散了讲的, 感觉很散乱, 有时看到后面, 还得去前面找与之相应的内容. 所以, 这本书是否去读, 读者可根据实际情况选择. 前面的书看完了, 可以回过头来看《JavaScript权威指南》, 将是不错的选择.
上面的书都看完并读懂之后, 原生JavaScript算是入门且有一定的功力了, 接下来可能需要你实践与领悟了, 后面的该读什么样的书相信自己也有一个大概的方向了.
学完原生JavaScript, 顺便再提下库的学习. 库的目的是让我们更便捷的使用JS, 但原生JS才是根本, 若过于倚重库, 而忽略原生JS, 你永远也只是知其然, 而不知其所以然. 原生JS与库应该是相辅相成的,所以, 学习库之前, 一定要对原生JS有一定了解, 并且花在学习原生JS上的时间永远要多于库的学习. 因本人仅熟悉jQuery库, 本文只推荐一本jQuery库学习书藉: 《锋利的jQuery》. 这是一本讲jQuery再简单化的讲述给读者的书, 书中的内容都可以通过jQuery API找到, 但作者用更直白的语言描述出来, 并辅以样例, 清晰易懂. 只要稍稍用心, 看完此书, 写完书中样例, jQuery基本算是会了.
HTML5与CSS3
HTML5与CSS3的学习, 目前除了API还没有更多可以选择的书. 本人最近在阅读《HTML 5用户指南》, 此书对HTML5的新标签与新功能讲的还清晰, 虽然还没读完, 但就目前我读过的前七章(共十章),感觉此书还是值得一读的. 至于CSS3, 除了API还没找到对应的书.
Web前端其他知识学习
前端是精一多专的职业, 前端不仅仅要会HTML/CSS/JS, 还需要你对综合知识, 比如用户体验, 搜索优化, 后台语言等都要有一定的了解. 其实这方面的书, 我自己读的也比较少, 更多的是在网络上关注相关的知识并加之自己领悟消化.
这里我只推荐两本书《用户体验的要素》《Web前端开发修炼之道》, 并且这两本书都是可选的.
《用户体验的要素》是一本没有代码的理论书, 但它并不枯燥. 全书都在告诉你用户体验的思想, 所以这不是一本有答案的书. 可以说, 此书对我本人对用户体验的认知有一个深层次的理解.
《Web前端开发修炼之道》一书是前端经验进阶的书, 喜忧参半, 文中有部分让人受益知识, 但也有不少地方我认为是糟粕. 比如, 书中对CSS过于模块化的思想, 比如讲第五章讲JavaScript的样例竟然没有一条注释. 所以, 这本书读者选择前请慎重. 阅读过程中也要有自己的主见, 取其精华, 弃其糟粕.

最后, 希望本文对初学者选择学习书籍有帮助, 也希望高手们对本文书藉选择提出指正.

基于jQuery淡入淡出可自动切换的幻灯插件(2011.01.11更新)

此插件是对10年8月20日的文章的更新, 之前的版本有诸多bug…抱着对读者负责的态度,又重写了一次.

更新内容:
1. 用户快速划过按钮时不触发鼠标事件;
2. 鼠标划入当前图片按钮时不闪烁;
3. 简化并优化代码.
使用方法就不详述了, 请参见源码及相关注释:点此查看DEMO

$.fn.iFadeSlide = function(iSet){
	/*
	 * iSet可选参数说明:
	 * iSet.field==>幻灯区域内的图片集
	 * iSet.ico==>按钮钩子
	 * iSet.high==>按钮高亮样式
	 * iSet.interval==>图片切换时间
	 * iSet.leaveTime==>不触发鼠标划入事件的最大时间值
	 * iSet.fadeInTime==>淡入时间
	 * iSet.fadeOutTime==>淡出时间
	 * 调用方式$(document).iFadeSlide({field:'...',ico:'...',...})
	 */
    iSet = $.extend({high:'high',interval:3000,leaveTime:150,fadeOutTime:400,fadeInTime:400},iSet);
    var imgField = $(iSet.field || '#slide>img');
    var icoField = $(iSet.ico || '#ico');
	var curIndex = 0;
    var slideInterval = iSet.interval || 3000;
    var hoverTime = iSet.leaveTime || 150;
    var fadeOutTime = iSet.fadeOutTime || 400;
    var fadeInTime = iSet.fadeInTime || 400;
    var icos=null, fastHoverFun = null, autoSlideFun = null, hasIcoHighCls = null, changeFun = null,max=null;;
    var icoHtml = '<ul>';
	max=imgField.size();
	//按图片传入对应的按钮
    imgField.each(function(i){
        icoHtml += '<li>' + (i + 1) + '</li>';
    });
    icoHtml += '</ul>';
    icoField.append(icoHtml);
	//淡入淡出函数
    changeFun = function(n){
        imgField.filter(':visible').fadeOut(fadeOutTime, function(){
            imgField.eq(n).fadeIn(fadeInTime)
            icos.eq(n).addClass(iSet.high).siblings().removeClass(iSet.high);
        });
    }
    icos = icoField.find('ul>li');
	//为第一个按键初始化高亮
    icos.first().addClass(iSet.high);
	//按钮鼠标划入划出事件
    icos.hover(function(){
        clearInterval(autoSlideFun);
        curIndex = icos.index(this);
        hasIcoHighName = $(this).hasClass(iSet.high);
		//setTimeout避免用户快速(无意识性划过)划过时触发事件
        fastHoverFun = setTimeout(function(){
			//鼠标划入当前图片按钮时不闪烁
            if (!hasIcoHighName) {
                changeFun(curIndex);
            }
        }, hoverTime);
    }, function(){
        clearTimeout(fastHoverFun);
		//自动切换
        autoSlideFun = setInterval(function(){
            curIndex++;
            changeFun(curIndex);
            if (curIndex ==max ) {
				changeFun(0);
                curIndex = 0;
            }
        }, slideInterval)
    }).eq(0).trigger('mouseleave');

    //当鼠标划入图片区域时停止切换
    imgField.hover(function(){
        curIndex = imgField.index(this);
        clearInterval(autoSlideFun);
    }, function(){
        icos.eq(curIndex).trigger('mouseleave');
    });
}

CSS技巧: 模块化编码

写在文章之前: 本文仅限于CSS研究, 其实用性(过多的类名组合及原子类会导致后期维护非常难)有待商讨. 有许多同行朋友对本文的思想持反对意见, 包括我自己对本文的思想也一直是仅限于自己研究学习, 未曾真正的用于过商业项目中. 过于模块化有风险, 使用请慎重!

原生JS因jQuery的”write less,do more”变得极简, HTML因语义化编码变得简明, 那么, 有没有一种方式让CSS也更加的高效精致呢? 当然有, 那便是模块化编码.
CSS的模块化,我们可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, “类”便是它的核心, OOP的多用组合少用继承一样是它的基本原则. CSS模块化是一个新颖高效的CSS编码方式, 若有接触过YUI CSS的朋友肯定对这种方式有所了解.
如何CSS模块化, 我想这才是大家真正关心的. 我所理解的CSS模块化, 应该从两大块去区分.
第一大块, 从整站全局模块化. 这一点大家并不陌生, 时常用到的reset css便是模块化的一部分, 全局通用的字体样式, 链接样式, 以及通用头部底部及主体容器等等这些我们已经熟知, 另外诸如定义文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、长度高度(如.w10{width:10px})、边距(如.m10{margin:10px})等页面中会常用到的样式,这一类,我们称之为CSS通用原子类(哈,与类扯上关系了,那就权当成类吧).通用原子类有两个特点: 通用性和原子性, 任何页面都可以随意使用它们, 且他们只表现最基础的样式, 一个通用原子类只设置一个样式,不可再分. 关于整站全局模块化不再详述, 本文后面我会贴出阿当的《Web前端开发修炼之道》一书中常用通用原子类样式.
第二大块, 是从视觉效果上模块化, 在视觉上样式和功能相对独立稳定的部分即可视为模块. 拆分这些模块, 应该尽量遵循一个原则: 模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块.
下图是我画的一个简易的页面视觉图:
CSS模块化视觉样例
看到上图, 菜鸟的CSS编码一般是为1~4定义四个类名,为他们写各自的样式; 明智一点的写法是为1~4定义四个类名, 用.a .b .c .d{…}方式定义共同样式, 然后再为各自定义不同部分的样式; 但是, 还有一种完美的方式, 那便是模块化. 下面我就以上图为例做个简单的模块化分析.
第一步, 分析整个视觉共用部分. 可以看出,1~4中,标题背景,标题文字,内容文字这三个部分的样式都是相同的, 所以, 我们可以为这个四个区块定义一个类名, 将共同的样式写给这个类名:

...
<div class="box">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<h2>倒霉松鼠再出山</h2> <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p> </div> <div class="box"> <h2>倒霉松鼠再出山</h2> <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p> </div> ...

第二步, 分析出不同部分, 并权衡高效使用. 可以看出, 不同部分, 主要是内容背景色和区块宽度两部分. 先说背景色, 背景色有三种, 淡黄(1个), 白色(2个), 灰色(1个), 遵从”模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块”的原则, 我们要把2个白底的样式提出来, 另两个单独定义, 而根据CSS优先原则, 我们可以把白底默认定义到第一步中的box样式中, 另两种背景色可做重定义处理. 再来看看宽度与定位, 2,4宽度等同且都右浮动, 所以, 我们可以把这部分提出来模块化, 而浮动一般可以直接调用通用原子类, 所以, 我们仅仅需要定义一个宽度样式中(若这个宽度在通用原子类中也有就更好了). 如此以来, HTML可以这样写:

...
<div class="box bg_y">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w bg_g">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
...

或许, 这样的结构对HTML页面来说, 会显的有些臃肿, 但CSS文件因为重用性的提高而大大的减小了.
CSS模块化是一个比较实用但也需要去领悟的思想, 实际使用中也需要全面的分析, 过多的模块也会导致维护性的降低, 如同OOP编程一样, 我们也要考虑”公有属性”与”私有属性”.
本文通过一个简单的例子解析了CSS模块化的基本思想, 更多关于CSS模块化的知识, 可以看YUI CSS或者其他网络上的资源.
do write, less more…CSS也可以做到.
附: 阿当《Web前端开发修炼之道》一书中分享的通用原子类:

/*文字排版*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}

渔夫科技