作者归档：前端开发-武方博

关于 前端开发-武方博

我是一名前端开发人员，这里是我工作和学习的地方，时刻关注最新的前端开发技术，交流分享最热门的前端开发资讯。css+xhtml+javascript+jquery=前端开发-武方博。

Javascript参数按值传递

发表于 2012/04/27 由 前端开发-武方博  157 views

关于Javascript中参数的传递到底是按值传递还是按引用传递，这个问题再此之前一直没有想过，话说javascript中有两种变量类型：基本类型和引用类型，基本类型包括：Number、String、Undefined、Null、Boolean这五种，而引用类型就是Object，根据之前在代码上的经验以及对javascript这门松散类型的语言的认识，以为在参数的传递中，传什么类型的值就按什么类型传递，比如传基本类型的变量，则参数是按照值进行传递，而传引用类型的变量的时候，则是按照引用传递。 昨晚在看《Javascript高级程序设计》的时候，才知道我之前的这种看法是错误的，下面是书中引用片段： ECMAScript中所有的函数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一变量一样。基本类型的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。有不少开发人员在这一点上会感到困惑，因为访问变量有按值和按引......查看更多>>

发表在 javascript | 标签为 , | 一条评论

项目进度控制的技术

发表于 2012/04/13 由 前端开发-武方博  301 views

项目进度控制是项目经理的一项重要职责。俗语说的“时间就是金钱”在这里体现得再明显不过了。项目管理和自驾车回老家过年是相同的，实际上按照项目的定义，“自驾车回老家过年”也是一个不折不扣的项目，只是它更贴合大家的生活，更容易引起共鸣，我们就拿它来做例子说明。 从乘客的角度，如果坐车很久，但是没有达到预期的目 的地的时候，就会产生疑问，一般都会去询问司机“到哪里了”，如果司机的回答没有那么令人满意，这个疑问就会积累。积累到一定程度，就会开始怀疑是否迷 路，如果这个疑问一直无解，最终就会要求停车问路。如果坐的是出租车，就会导致乘客下车，换车继续前进。 项目进行过程中同样如此，因为软件项目的“不可见”特性，客户心理更脆弱和不稳定。如果每次项目经理给出的进度都是无法验证的，客户的疑问就会积累，最终到无法忍受而爆发。 人对一个事物的完成都会有自己的“心理预期值”，这 个值会随着人对该事物的了解的加深而进行调......查看更多>>

发表在 经验感悟 | 标签为 | 2 条评论

淘宝前端技术系列课程

发表于 2012/04/13 由 前端开发-武方博  435 views

今天是第一堂课，由灵玉主讲的“淘宝前端技术巡礼”。全面回顾淘宝前端技术的缘起和发展，介绍前端工程师的职业发展路线，给出足够多的铺垫，为接下来的三次课程打好基础。 淘宝前端技术的发展一定程度上反应了中国国情，前端工程师的入门、入道过程是非常坎坷也是备受关注，尽管大学里还缺少“前端技术”这门专业，但前端技术的知识体系已然趋于丰富和完善，前端技术本身就是一门充满挑战的行当，不断的从实践中提炼出一支支各具特色的技术派系，当下的前端技术也呈现出多元绚丽、独具魅力的一面。（本次课程ppt参考了部分小马和玉伯的分享） 本次系列课程即是由浅入深的介绍前端技术的关键部分，后续对HTML/CSS/JavaScript、包括浏览器渲染过程和JS引擎原理、常用工具等知识会有更详细的讲解。 http://www.slideshare.net/lijing00333/ss-12323405 本次课为系列课程的第二课，由舒克带来的“HTML/CSS/JavaScript”基础知识，课程中着重介绍了HTML的语义......查看更多>>

发表在 前端开发 | 标签为 , , | 留下评论

html5实现全屏的api方法

发表于 2012/03/25 由 前端开发-武方博  593 views

【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();   // Firefox 10 element.mozRequestFullScreen(); document.mozCancelFullScreen();   // W3C 提议 element.requestFullscreen(); document.exitFullscreen();   【事件监听】   // Webkit-base: element.onwebkitfullscreenchange // Firefox: element.onmozfullscreenchange   // W3C Method: element.addEventListener(‘fullscreenchange’, function(e) { if (document.fullScreen) {                     // document.webkitIsFullScreen /* make it look good for fullscreen */ } else { /* return to the normal state in page */ } }, true);   【css伪类】 :fullscreen – 当前全屏化的元素 :fullscreen-ancestor – 所有全屏化元素的祖先元素 &nb......查看更多>>

发表在 css3 html5 | 标签为 , | 6 条评论

基于多栏列表的瀑布流布局

发表于 2012/03/25 由 前端开发-武方博  928 views

一、开篇无关紧要的话 今天四处闲逛，看到迅雷UEDxwei兄写了篇名为“浅谈个人在瀑布流网页的实现中遇到的问题和解决方法(http://www.wufangbo.com/pubuliufangfa/)”的文章，我两只沉沉的萝卜眼顿时放出无数闪亮的小星星。 倒不是文章本身，而是可以用来制作demo的图片资源啊，啊咔咔（得瑟中……）！！ 因此，本文即将展示的demo中的图片都有迅雷UED提供，这里先郑重感谢。 二、稍稍要紧的话 跟风，尤其受pinterest的煽风点火，瀑布流现在不少人关注。我正好最近比较闲，加上有人曾在我站点提出希望我介绍点瀑布流的东西，所以，今儿个也随下大流。 pinterest以及上面迅雷UED xwei的瀑布流demo（至少在FireFox下还是有致命的显示bug的）都是采用的绝对定位实现的，有相对复杂的位置计算。 我一向不喜欢吃别人嚼过的米饭，于是尝试使用另外的原理实现。我是个流体布局控，对绝对定位啊、浮动啊什么的一向没什么好感，于是，这里要介绍的就是基于多栏列表流体......查看更多>>

发表在 前端开发 | 标签为 , , , | 2 条评论

浅谈个人在瀑布流网页的实现中遇到的问题和解决方法

发表于 2012/03/25 由 前端开发-武方博  621 views

先上Demo js实现瀑布流排序 :http://www.wufangbo.com/demo/javascript/04/index.html js实现瀑布流无限向下拖动效果:http://www.wufangbo.com/demo/javascript/05/index.html 随着pinterest的走红，瀑布流式的布局被越来越多的网站所使用，这种布局确实有很多好处，图片列表页有很强大的视觉感染力，而且还提高了用户“发现好图”的效率。瀑布流的实现有很多种方式，之前淘宝UED有篇文章详细的介绍过各种方式的优劣。今天我们主要讨论一下绝对排序来实现瀑布流的方式 即 Pinterest 采用的方式。 首先说下瀑布流的排序算法，参考demo1，思路非常简单，我们把瀑布流拆成三个部分来看：容器、列、格子 1.先计算当前屏幕最多能容纳几列瀑布，其值为 “向下取整(屏幕可见区域宽度/(格子宽度+间距))”; 2.为了保证容器的居中，将容器的宽度设置为 列数* (格子宽度+间距) – 间距，这里需要注意的是 当容器的宽度计算出来之后再显示，否则会造成页面宽度的抖动，......查看更多>>

发表在 前端开发 | 标签为 , , , | 留下评论

网页设计师一定要知道的网站资源

发表于 2012/03/25 由 前端开发-武方博  497 views

网站设计资源在网上有很多，而且大多是国内的，但都不够具体，没有什么顺序或流程。下面说一下做为一名真正的网站设计师，你必需要知道的网站设计资源或文献。 无论你是一个已经有经验的网页设计师还是一个刚入门的网页美工，最有效的方法来提高你们的网站设计技巧或思维方式，那就是实践。作为网站设计人员，无论有经验与否，我都将把我觉得最好的资源或网页设计教程全部分享给大家： WebMonkey ，是一个专业为网页设计爱好才提供很多很有用的素材和资源的网站，这里的信息相当完善，几乎涉及到有关Web设计行业的内容全都包括了。我自己也不断地在这里学习网页设计的新思路和一些重要技能，同时在设计上我确实得到了不少的提高。 网站地址：www.webmonkey.com，下面先截图： W3 Schools 这个是最好用的，因为在国内有中文。最开始我只知道有英文，后来我是无意中发现了这个中文版。这个网站最突出的作用在于：你可以找到你想要的提示性服务，如HTML代码、C......查看更多>>

发表在 网页设计 | 标签为 , , | 一条评论

jQuery实现随即颜色标签云

发表于 2012/03/14 由 前端开发-武方博  537 views

js代码： <script type="text/javascript"> $(function(){ var obj=$("#wrap a"); function rand(num){ return parseInt(Math.random()*num+1); } function randomcolor(){ var str=Math.ceil(Math.random()*16777215).toString(16);    if(str.length<6){     str="0"+str;    }    return str; } for(len=obj.length,i=len;i--;){ obj[i].style.left=rand(600)+"px";    obj[i].style.top=rand(400)+"px";    obj[i].className="color"+rand(5);    obj[i].style.zIndex=rand(5);    obj[i].style.fontSize=rand(12)+12+"px";    obj[i].style.color="#"+randomcolor(); }   }) </script> html代码: <div id="wrap"> <a href="#">web标准学习</a><a href="#">css</a>      <a href="#">javascript</a><a href="#">html5</a>    ......查看更多>>

发表在 jquery | 标签为 , | 留下评论

wordpress 301跳转代码和防盗链代码

发表于 2012/03/07 由 前端开发-武方博  269 views

wordpress 301跳转 以下代码放到主题的header.php最前面就可以了 <? if($_SERVER[HTTP_HOST]!=’www.wufangbo.com’){ header(“HTTP/1.1 301 Moved Permanently”); header(“Location: http://www.wufangbo.com$_SERVER[REQUEST_URI]“); exit(); } ?> 防盗链代码 # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_REFERER} !^$ [NC] RewriteCond %{HTTP_REFERER} !hugao8.com [NC] RewriteCond %{HTTP_REFERER} !google.com [NC] RewriteRule .*.(gif|jpg|png|swf)$ http://t1.qpic.cn/mblogpic/0c998b95f21338357c98/460 [R,NC,L] RewriteBase / RewriteRule ^index.php$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress 利用.htaccess文件，设置图片mp3歌曲等的防盗链： 前提Apache中的......查看更多>>

发表在 wordpress | 标签为 , , | 留下评论

js判断一个元素是否为另一个元素的子元素

发表于 2012/03/07 由 前端开发-武方博  289 views

用js判断一个元素是否为另一个元素的子元素，再做一些效果的时候经常用到，特别是和鼠标事件相关的应用中，比如一个浮层，在鼠标操作浮层内元素的时候浮层显示，当点击浮层外的元素的时候隐藏浮层。当然方法有很多，不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一。 JS代码 function isParent (obj,parentObj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != ‘BODY’){ if (obj == parentObj){ return true; } obj = obj.parentNode; } return false; } $(document).click(function(event){ alert(isParent(event.target, $(“.floatLayer”)[0])); }); 感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展： jquery代码 //判断:当前元素是......查看更多>>

发表在 javascript | 标签为 , | 留下评论

jQuery基金会成立了 促进jQuery发展

发表于 2012/03/07 由 前端开发-武方博  335 views

jQuery 今天发布声明成立 jQuery 基金会，这是在 John Resg 淡出后 jQuery 组织架构上比较大的变化。 jQuery 基金会是一个非营利性的行业协会，是由一组领先的JavaScript开发人员和架构师组成，致力于三个目标：支持jQuery核心，用户界面​​和移动项目的发展，提供jQuery文档和支持和促进jQuery社区发展。 jQuery 的基金会募到捐款将用于促进该基金会的发展。 官方声明原文：ANNOUNCING THE JQUERY FOUNDATION   (BOSTON) — The jQuery Board, in conjunction with Software Freedom Conservancy, is proud to announce the formation of the jQuery Foundation, Inc., an independent organization that will manage jQuery, the Internet’s number one JavaScript library, and its constituent projects. The jQuery Board previously administered jQuery under the aegis of the Conservancy, a public charity that acts as a non-profit ho......查看更多>>

发表在 未分类 | 标签为 , | 留下评论

10个基于CSS3和jQuery的loading加载动画设计方案

发表于 2012/03/07 由 前端开发-武方博  597 views

过去，由于加载图片的格式限制(只能使用GIF格式)，设计加载动画不是那么容易。随着技术和浏览器的发展，用 CSS3 和 jQuery 就可以方便地设计加载动画，这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。 1. Sonic——循环的加载动画 Sonic是一个很小的JS“类”，你可以用它来创建自定义加载动画——蛇吞尾似的循环动画。 2. 闪烁的加载动画 用 CSS3 动画可以实现闪烁跳跃式的正在载入页面效果。 3. 旋转的加载动画(无需图片) CSS transform(Firefox 3.5+和基于Webkit的浏览器中可用)有很多有趣的功能，如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。   4. Ajax 风格的加载动画(无需图片) 图片是网站中非常重要的部分，如果使用gif图片作为加载动画，则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS，这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 5. 圆......查看更多>>

发表在 css3 html5 | 标签为 , , , | 留下评论

各种浏览器的Hack写法(chrome firefox ie等)

发表于 2012/03/05 由 前端开发-武方博  543 views

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。 下面是我收集有关于各浏览器下Hack的写法 1、Firefox @-moz-document url-prefix() { .selector { property: value; } } 上面是仅......查看更多>>

发表在 前端开发bug修复 | 标签为 , | 一条评论

QQ2012试用体验新功能 QQ2012下载

发表于 2012/03/01 由 前端开发-武方博  724 views

QQ2012下载地址 http://exp.qq.com/ QQ2012的设计终于从质感高光开始回归平面和线条了 标签式聊天窗口 腾讯太有爱了     查看更多>>

发表在 未分类 | 标签为 , , , | 留下评论

百度分享在百度搜索里的小手百度已经取消

发表于 2012/03/01 由 前端开发-武方博  445 views

3月1日下午2点左右笔者在使用百度搜索引擎时发现了，百度分享的小手已经消失，上段时间很多站长 为了这个分享小手做了不少工作才让自己的网站在百度搜索时现实了百度分享次数的小手，可是今天发现已经消失，百度官方没有做出任何解释，不知道以后会否恢复。 百度分享能为站长带来两点好处：(1)带来流量。(2)提高排名。而这两点恰恰击中草根站长的要害，都是草根站长拼了命想要的，而眼下，sns社会化分享如日中天，网络里走到哪儿都能看到分享到各个新浪微博、腾讯微博、人人网、开心网等等的按钮。百度等搜索引擎也说过要提高sns类社会化分享为网站带来的权重。那么，百度为什么会取消网址后面的小手呢？希望官方做出解释。 查看更多>>

发表在 未分类 | 标签为 , | 2 条评论
第 1 页，共 19 页12345678910111213141516171819