代码改变世界

Javascript动画系列之 —— lightbox实现(二)

2013-04-26 21:02 by MoltBoy, 1439 阅读, 1 推荐, 收藏, 编辑
摘要:上次帖子里详细描述了lightbox实现思路,本想将整个原生的lightbox源码放出来,但是觉得留点思考的余地更好。 本文中就贴上淡入淡出和滑动的JS原生代码,通过测试,能兼容IE8、Firefox、Chrome。function bind(fn, context){ //函数绑定,传递context上下文 var args = Array.prototype.slice.call(arguments, 2); return function(){ var innerArgs = Array.prototype.slice.call(arguments); ... 阅读全文

javascript中this对象之 —— 意乱情迷

2013-04-25 23:45 by MoltBoy, 430 阅读, 0 推荐, 收藏, 编辑
摘要:javascript函数中的this对象和其他语言比较起来很很大不同,甚至在严格模式和非严格模式下都有不同。 大多数情况下,this对象是有函数的调用对象决定。在任务执行过程中,this对象不能被修改。ECMAScript 5引入了bind方法来设置调用中的this对象,实际上就是传递上下文,下次有时间,可以具体讨论下bind方法,很多框架都已经实现了,也就是说早就有了实际标准 —— 先上车后买票。 就这么些颇为空洞,下面就使用几个例子function fn(){ return this;}alert(fn() === window); //true 这个例子,结果和原因都比... 阅读全文

斐波那契数列javascript实现 —— 极为有趣的数列(应用极为广泛)

2013-04-24 21:49 by MoltBoy, 951 阅读, 1 推荐, 收藏, 编辑
摘要:function calculateFibonacci(num){ ////算法主体,学习算法的朋友可以自己画画,fibonacci在自然规律中无处不在 return (num === 0 || num === 1) ? num : (arguments.callee(num - 1) + arguments.callee(num - 2));}function doStuff(num, successCallback, errorCallback){ //主体函数 try{ var results = []; for(... 阅读全文

javascript中函数和方法的区别

2013-04-24 16:20 by MoltBoy, 7397 阅读, 0 推荐, 收藏, 编辑
摘要:经常谈论起函数和方法,也常常搞不清楚它们之间的界限,经常把两个混用。首先来看看,两者是如何定义的? 函数(function)是可以执行的javascript代码块,由javascript程序定义或javascript实现预定义。函数可以带有实际参数或者形式参数,用于指定这个函数执行计算要使用的一个或多个值,而且还可以返回值,以表示计算的结果。 方法(method)是通过对象调用的javascript函数。也就是说,方法也是函数,只是比较特殊的函数。假设有一个函数是fn,一个对象是obj,那么就可以定义一个method: obj.method = fn; obj.method(); ... 阅读全文

彻底理解javascript的回调函数(推荐)

2013-04-24 14:54 by MoltBoy, 62077 阅读, 6 推荐, 收藏, 编辑
摘要:在javascript中回调函数非常重要,它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,或者有一些简短的关于callback的使用示例。 函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则。在javascript中,函数是比较奇怪的,但它确确实实是对象。确切地说,函数是用Function()构造函数创建的Function对象。Function对象包含一个字符串,字符串包含函数的javascript代码。假如你是从C语言或者java语言转过来的,这也许看起来很奇... 阅读全文

如何让自己的javascript代码具有可维护性?

2013-04-21 20:26 by MoltBoy, 930 阅读, 0 推荐, 收藏, 编辑
摘要:为雅安祈福!!愿好人一生平安!! 现在的Web程序不再是简简单单文字和图片的排版输出,稍微大点的网站都有成千上万行javascript代码,执行各种复杂的功能提供用户不同的交互体验。往往当你进入一家企业,很多情况并不是让你开发新的web程序,而是让你基于原有的成果开展工作,如果代码不具备可维护性,那么此项工作就会变得相当难以进展。 那么什么是可维护性呢?它具有什么特征呢? - 易读易懂 —— 不需要原作者解释,就能直接读懂源代码,并能轻松基于这些源码开展下一步工作; - 可扩展 —— 代码的构架能适应未来功能的扩展; - 数据灵活性 —— 改动代码中的某些数据,只需修改少量代码而... 阅读全文

javascript习惯性的细节问题 —— 重谈细节,别只顾优雅

2013-04-17 18:28 by MoltBoy, 611 阅读, 1 推荐, 收藏, 编辑
摘要:晚饭之前,浏览了下博客园,阅读了梦想天空(山边小溪)翻译的《JavaScript初学者应注意的七个细节》的原文,写的非常不错。平常不注意的点点习惯,可能积累到最后成为致命的问题。正所谓,小病不医成大患,一定要防微杜渐。 一、简化代码 这是每个程序员最起码的素养和习惯,随着经验的不断丰富,一定学会回顾总结,写出简洁高效的代码。要想成为杰出的IT人员,忌讳只为完成任务而工作,除非你只是为了混口饭吃!至于如何简化代码,可以坚持阅读行业顶级人士的代码风格和习惯,当然不只是为了简洁代码而做这些工作,懂其然懂其所以然! 具体如何简化,山边小溪已经列举了部分例子,另外可以灵活地使用“||”-逻辑或... 阅读全文

最简单的手风琴效果 —— 无动画

2013-04-16 20:39 by MoltBoy, 497 阅读, 0 推荐, 收藏, 编辑
摘要:试验CSS效果时,顺便试试这样的效果,居然可以实现类似的手风琴效果,只是不是具体控制,因而没有动画效果!纯属娱乐,毫无技术含量!<html><head> <title></title> <style type="text/css"> body{margin: 0;padding: 0;} table{margin:20px auto;width:730px; hieght:200px;border: #F00 solid 2px;padding: 3px;} table td{width: 50px;height: 阅读全文

javascript动画系列 —— 切换图片(原生)

2013-04-16 16:35 by MoltBoy, 493 阅读, 0 推荐, 收藏, 编辑
摘要:在代码里详细注解了,这里就不再赘诉了。(function(window){ var m$ = function(){ function getId(id){ return document.getElementById(id); } function getTag(tag){ return document.getElementsByTagName(tag); } function extend(des, src){ for(... 阅读全文

Javascript动画系列之 —— lightbox实现(一)

2013-04-15 00:14 by MoltBoy, 646 阅读, 2 推荐, 收藏, 编辑
摘要:随着DOM和动态JS、CSS操作的出现,网页的交互性效果变得越来越强大,而比较明显的体会就是日渐丰富多样的图片查看和浏览方式。貌似印证了某句名言:只有你想不到的,没有你做不到的,当然前提是都在如今的技术规范之内。 那lightbox是什么样的效果,内部的实现原理是什么,总结起来无非这么几点: ①、当点击图片时,就会弹出一个图片覆盖层,而不是直接进入实际图片; ②、图片覆盖层显示之时,一个半透明的灰层覆盖整个页面(opacity),模糊化被覆盖的页面内容; ③、图片覆盖层会有一些从图片到图片的导航方法。 Lightbox的出现刺激了其他多种类似的图库的发展,这个图库并没有使用任何框... 阅读全文