<?xml version="1.0" encoding="UTF-8"?><rss version="0.92">
<channel>
	<title>前端思考：专注前端开发，关注用户体验</title>
	<link>http://www.artcss.com</link>
	<description>一个像素的距离...</description>
	<lastBuildDate>Sun, 15 Aug 2010 05:41:51 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	<!-- generator="WordPress/3.0.1" -->

	<item>
		<title>浏览器兼容手册[总结]</title>
		<description><![CDATA[这是我总结多年的一个小文档，最近看见有人咨询浏览器兼容的问题，就贡献出来。 并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了&#8230;汗。大家一起慢慢完善吧。 javascript部分 1. document.form.item 问题 问题： 代码中存在 document.formName.item(&#8220;itemName&#8221;) 这样的语句，不能在FF下运行 解决方法： 改用 document.formName.elements["elementName"] 2. 集合类对象问题 问题： 代码中许多集合类对象取用时使用()，IE能接受，FF不能 解决方法： 改用 [] 作为下标运算，例： document.getElementsByName(&#8220;inputName&#8221;)(1) 改为 document.getElementsByName(&#8220;inputName&#8221;)[1] 3. window.event 问题： 使用 window.event 无法在FF上运行 解决方法： FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决： onMouseMove = &#8220;functionName(event)&#8221; function functionName (e) { &#160; &#160; e = e &#124;&#124; window.event; &#160; &#160; &#8230;&#8230; } 4. [...]]]></description>
		<link>http://www.artcss.com/archives/850.html</link>
			</item>
	<item>
		<title>仿校内textarea输入框字数限制效果</title>
		<description><![CDATA[这是一个仿校内textarea回复消息输入框限制字数的效果，具体表现如下： 普通状态是一个输入框，当光标获取焦点时，出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片。 普通状态效果如下： 获取焦点时： 字数限制的javascript代码如下: Download oTab.js1 2 3 4 5 6 7 8 $&#40;function&#40;&#41;&#123; function maxLimit&#40;&#41;&#123; var num=$&#40;this&#41;.val&#40;&#41;.substr&#40;0,140&#41;; $&#40;this&#41;.val&#40;num&#41;; $&#40;this&#41;.next&#40;&#41;.children&#40;&#34;span&#34;&#41;.text&#40;$&#40;this&#41;.val&#40;&#41;.length+&#34;/140&#34;&#41;; &#125;; $&#40;&#34;#textlimit&#34;&#41;.keyup&#40;maxLimit&#41;;//调用方法 &#125;&#41;; 点击下面“运行”直接查看效果 &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34;&#62; &#60;meta name=&#34;author&#34; content=&#34;Web Layout:LiQiang.Gu;&#34; /&#62; &#60;meta name=&#34;description&#34; content=&#34;前端思考 web前端 前端制作 artskin www.artcss.com&#34; /&#62; &#60;meta [...]]]></description>
		<link>http://www.artcss.com/archives/831.html</link>
			</item>
	<item>
		<title>jQuery滑动导航菜单</title>
		<description><![CDATA[今天用jQuery写了个滑动导航菜单，加入了缓动展开的效果。比以前常用的用css伪类:hover+ie6模拟:hover的js写的那个效果好，所以拿出来分享一下，可能还可以更好的改进，欢迎大家多拍砖。 先看一下效果图 实例：Demo 用到的javascript代码如下: Download oTab.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $&#40;function&#40;&#41;&#123; $&#40;&#34;ul.sub&#34;&#41;.parent&#40;&#41;.append&#40;&#34;&#60;span&#62;&#60;/span&#62;&#34;&#41;; $&#40;&#34;ul.sub ul&#34;&#41;.parent&#40;&#41;.append&#40;&#34;&#60;em&#62;&#60;/em&#62;&#34;&#41;; $&#40;'#nav ul'&#41;.closest&#40;'li'&#41;.hover&#40;function&#40;&#41;&#123; $&#40;this&#41;.find&#40;&#34;span&#34;&#41;.addClass&#40;&#34;arrow&#34;&#41;; $&#40;this&#41;.find&#40;&#34;em&#34;&#41;.removeClass&#40;&#34;arrow&#34;&#41;; $&#40;this&#41;.children&#40;&#34;ul&#34;&#41;.stop&#40;true,true&#41;.slideDown&#40;'fast'&#41;.show&#40;&#41;; $&#40;&#34;#nav ul&#62;li&#34;&#41;.hover&#40;function&#40;&#41;&#123;$&#40;this&#41;.addClass&#40;&#34;hover&#34;&#41;&#125;, function&#40;&#41;&#123;$&#40;this&#41;.removeClass&#40;&#34;hover&#34;&#41;&#125;&#41;; &#125;,function&#40;&#41;&#123; $&#40;this&#41;.children&#40;&#34;ul&#34;&#41;.stop&#40;true,true&#41;.hide&#40;&#41;; $&#40;this&#41;.find&#40;&#34;span&#34;&#41;.removeClass&#40;&#34;arrow&#34;&#41;; $&#40;this&#41;.find&#40;&#34;em&#34;&#41;.addClass&#40;&#34;arrow&#34;&#41;; &#125;&#41; &#125;&#41;; 点击下面“运行”直接查看效果 &#60;!DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01//EN&#34; &#34;http://www.w3.org/TR/html4/strict.dtd&#34;&#62; &#60;html&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34;&#62; &#60;meta name=&#34;author&#34; content=&#34;Web [...]]]></description>
		<link>http://www.artcss.com/archives/821.html</link>
			</item>
	<item>
		<title>网页浮动工具条</title>
		<description><![CDATA[前两天用jQuery写了个网页浮动工具条，主要效果如下： 1、自动判断浏览器宽度。 当浏览器窗口小于1024时，工具条会自动隐藏 支持浏览器窗口拖拽 2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。 用到的javascript代码如下: Download showBar.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 $&#40;function&#40;&#41;&#123; var name = $&#40;'#float_scroll'&#41;; //浮动工具条的ID function showBar&#40;time&#41;&#123; setTimeout&#40;function&#40;&#41;&#123; $&#40;name&#41;.show&#40;&#41;;&#125;,time&#41;; &#125; [...]]]></description>
		<link>http://www.artcss.com/archives/799.html</link>
			</item>
	<item>
		<title>最简单的代码实现Tab</title>
		<description><![CDATA[在工作中经常遇到这种Tab切换效果，网上这种效果也是一搜一大堆，但不一定完全适合自己。写过许多次后，发现了一种方法不但代码简洁，而且调用方便，所以分享给大家。 这是基于jquery写的一个Tab，选项卡标题的id和选项卡内容class的名称保持一致即可。 用到的javascript代码如下: Download oTab.js1 2 3 4 5 6 7 8 9 $&#40;function&#40;&#41;&#123; function oTab &#40;&#41;&#123; $&#40;this&#41;.addClass&#40;&#34;current&#34;&#41;.siblings&#40;&#41;.removeClass&#40;&#34;current&#34;&#41;.parent&#40;&#41;.siblings&#40;&#41; .hide&#40;&#41;.siblings&#40;&#34;.&#34;+$&#40;this&#41;.attr&#40;&#34;id&#34;&#41;&#41;.show&#40;&#41;; &#125; //调用方法 $&#40;&#34;.tabt span,.tabt2 span&#34;&#41;.mouseover&#40;oTab&#41;;//同时调用两个或以上 $&#40;&#34;.tabt3 span&#34;&#41;.click&#40;oTab&#41;; &#125;&#41;; 点击下面“运行”直接查看效果 &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; /&#62; &#60;meta name=&#34;description&#34; content=&#34;前端思考，专注前端开发，关注用户体验，artskin artcss &#34; /&#62; &#60;meta name=&#34;keywords&#34; content=&#34;前端思考,artskin,artcss &#34; /&#62; [...]]]></description>
		<link>http://www.artcss.com/archives/762.html</link>
			</item>
	<item>
		<title>详解：JavaScript数据类型[转]</title>
		<description><![CDATA[JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。 String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.” 数值数据类型：JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。 Boolean 类型：可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。 Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。 Null 数据类型：null 值就是没有任何值，什么也不表示。 object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。 在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。 　　 JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。 变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 [...]]]></description>
		<link>http://www.artcss.com/archives/747.html</link>
			</item>
	<item>
		<title>jQuery1.4官方文档中文版[转]</title>
		<description><![CDATA[2010年1月14号, 恰逢jQuery四周年纪念日, jQuery的团队早早便开始了1.4版发布的准备工作, 并以每天一则公告的方式进行庆祝, 活动将持续14天。发布的首日, jQuery的团队首先列出了1.4版中的重大改进。我个人认为这篇文档是这几天以来内容比较充实的一篇文档。所以翻译过来, 以便同僚日后可以参考。时间仓促, 可能有几处不太明确的地方, 或是原文就草草带过, 可能会不大通畅。欢迎讨论或提出意见，以便共同进步。 原译者:coolnalu 原文地址: http://jquery14.com/day-01 .wp_syntax { color: #100; background-color: #f9f9f9; border: 1px solid silver; margin: 0 0 1.5em 0; overflow: auto; } .wp_syntax div{ vertical-align: top; padding: 2px 4px; } .entry h2{ background: #eeeeee; padding: 5px; } jQuery 1.4 发布啦 为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程，测试，和记录文档的工作，我们为此感到很骄傲。 我要以个人的名义感谢 Brandon [...]]]></description>
		<link>http://www.artcss.com/archives/677.html</link>
			</item>
	<item>
		<title>用户上传头像，等比例缩放</title>
		<description><![CDATA[其实关于用户上传头像大小问题早就有了比较完美的解决办法，那就是再上传时通过裁切来实现。 最近做一个专题，用裁切有点大材小用，而且着急上线，就写了个简单js来满足头像自适应预留位置大小。 具体要求如下： 1、当用户上传的头像宽和高均小于指定大小（200X150）时，图片按实际大小显示，且水平垂直居中 2、当用户上传的头像宽或高大于指定大小（200X150）时，分两种情况： 如果比3:4扁的话，则宽度缩为200，高度根据宽度自适应，且水平垂直居中。 如果比3:4窄的话，则高度缩为150，宽度根据高度自适应，且水平垂直居中。 用到的javascript代码如下[jQuery版]： Download script.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; $&#40;&#34;#tt a&#34;&#41;.click&#40;function&#40;&#41;&#123; [...]]]></description>
		<link>http://www.artcss.com/archives/602.html</link>
			</item>
	<item>
		<title>10个Js的小型库，效果真的很棒[转]</title>
		<description><![CDATA[这些列举的网站，站内还有大量的效果，希望大家多去找找，对于研究的朋友来说，更是很棒的源码参考。第5款的东东，很强很震撼… 1、$fx() 简介：$fx()是一个轻量级的动画库，一些复杂的动画，可以由多个简单的动画效果进行组合，但是提供的是混淆压缩过的代码，对于研究动画源码的朋友可能特别不爽 API：http://fx.inetcat.com/manuals.php 主页:http://fx.inetcat.com/ 2、JSTweener 简介：原始大小14K，支持大多数的动画特效 演示地址：http://svn.coderepos.org/share/l … es/transitions.html 主页地址：http://coderepos.org/share/wiki/JSTweener 3、FX 2.0 简介：代码清晰，支持多种形变动画，而且2.0版本在不局限于px单位，支持了em, %, 演示地址：http://www.ryanmorr.com/tests/fx2/ 主页地址：http://ryanmorr.com/archives/fx- … animation-framework 4、JsCharts 简介：用js生成图表，包括柱状图，饼状图，流线图 演示地址：http://www.jscharts.com/examples 主页地址：http://www.jscharts.com/ 5、Raphael 简介：也许你看了效果后会觉得唉，这有什么特别的，但是查看它的源码的时候，你会被震到，不信就去看看呗，里边的效果实在是太神奇了，虽然目前你根本用不上…. 演示地址：http://raphaeljs.com/dragon.html 主页地址：http://raphaeljs.com/dragon.html 6、Reflection.js 简介：倒影实现,如果是在个人项目中，还是可以用得上的，唉，感叹，现在是可供选择的效果太充足了，而实际真正用到项目中的确是寥寥无几，只能这么说，就目前的web项目在交互方面 只能打个不及格。现在貌似国外都是研究者，而我们只是应用者，而且应用得还不到位。 主页地址：http://cow.neondragon.net/stuff/reflection/ 脚本地址:&#160;&#160;http://cow.neondragon.net/stuff/reflection/reflection.js (27K) 7、leigeber 简介：准确的说 这不是一个库，而是一些效果集，但是这对于我们来说却是非常实用的，每个效果都在3K左右， 效果列表：http://www.leigeber.com/category/javascript/ 主页地址：http://www.leigeber.com/ 8、Shortcuts.js 简介：在web2.0+时代，web应用中的快捷键开始大量使用,而且开始流行起来，google reader 和 Gmail等应用更是引领这一潮流，但是作为开发者，搞定键盘的绑定却不是一件轻松的事情，而shortCuts则以更优的方式解决了这一问题。 演示地址：http://www.openjs.com/scripts/events/keyboard_shortcuts/ 主页地址：http://www.openjs.com/scripts/events/keyboard_shortcuts/ 9、Amberjack (4K) 简介：这个效果我觉得用在商城上 挺合适的，比如一些打折信息，热卖商品等，只是网站官方极力推销的，用这种方式到不失为一种好方法，当然反对的声音肯定挺多的… 演示地址：http://amberjack.org/skins/custo … skinId=black_beauty 主页地址：http://amberjack.org 10、Blackbird (10K) [...]]]></description>
		<link>http://www.artcss.com/archives/588.html</link>
			</item>
	<item>
		<title>让IE6更快的走向灭亡[转]</title>
		<description><![CDATA[最近关于浏览器的最重要的事情就是IE的极光0day漏洞了，这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击，当然也有很多色情网站被黑客利用，从而使用户受到严重的攻击，而IE6用户首当其冲，成为该漏洞的最大受害者。 其实我们天天在想到底哪一天IE6才会真正死去，但是从2001年发布以来，IE6一直统治着国内的浏览器市场，直到现在还占据着国内50%以上的浏览器市场份额。 但是我想，无论你是普通用户还是网站开发人员或者是国内的浏览器开发者，我们都应该采取一些措施，共同促进IE6的灭亡。 如果你是IE6的忠实用户，请尽快升级你的IE6 给你一个升级IE6的理由？好吧： 你和你的公司正在受到安全威胁。这个没有更好的理由来反驳了吧？就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击，还有哪家公司的IE6不会受到攻击呢？ 世界上各国政府都在建议大家升级浏览器。在IE6的0day漏洞被曝光之后，德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6； 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称，IE6受0day漏洞影响最为严重，IE8基本不受该漏洞影响。事实上，微软也不止一次号召用户升级浏览器。 这不是IE6的最后一个严重安全漏洞。IE6从发布到现在不知道出现过多少严重的安全漏洞，而这次远不是终结，它还有至少144个漏洞！ 微软在2014年之后将不再对IE6提供支持。2014年很久远吗？或者你相信2012年就是世界末日？ IE6对web标准的支持缺乏。IE6的技术还是10年前的，互联网技术经过10年的发展已经能够发生了巨大的改变，网站前端技术在不断进步，更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如，前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。 国内的一部分企业开始要求员工升级浏览器。比如腾讯公司，已经要求所有员工将IE6升级到IE7。 IE6太过时了，国外网友大部分都不再使用IE6了。统计显示，目前国外用户已经逐渐淘汰IE6了。IE8和Firefox是主流(via 人民网)。 国外各大网站开始明确表示将不再支持IE6。比如 Google 将停止支持IE 6 用户必须至少升至IE 7。 (部分参考自：http://mashable.com/2010/01/18/5-more-reasons-why-ie6-must-die/) 如果这几个理由都不够，那么请看国外统计的坚持使用IE6的原因，当然这里有些调侃的意味，如果你正好是其中一种情况，请不要生气 :) ： 当然在国内，坚持使用IE6的用户可能还是因为另外两个原因： 习惯了IE6的操作方式，不喜欢IE7和其它浏览器的tab式浏览。当然一个人的习惯是最重要的。tab的浏览器方式是谁发明的已经不可考了，不过Opera和Firefox纷纷使用，后来国内的maxthon浏览器也采用了那种方式，然后到06年IE7的时候，也采用了tab的方式。这说明tab是一种很好的浏览方式，高效、方便，不然广大网民早就开始反对这种方式了，而各大浏览器也不会坚持下去了。所以建议你尝试一下新技术，从你的习惯中走出来。 IE6比较快，IE7和IE8太慢了。IE7和IE8的确太慢了，不过新版的Firefox 3.6和Chrome一直是很快的哦。 前端开发人员可以争取放弃兼容IE6 如果你是一名光荣的前端开发人员，希望你能尽可能的做更多的事情来让IE6更快的死去： 以身作则，自己放弃IE6。从前端观察和其它技术网站的访问统计上看，IE6的用户比例竟然还有30%以上，这让我很震惊。作为一名前端开发者，用IE6做自己的主浏览器，那么你做的网站应该也不会在IE7/8以及其它更先进的浏览器中做测试的吧？ 说服你的BOSS或客户，放弃兼容IE6。有必要为了让网站在IE6中和其它浏览器中表现一直而花掉2倍甚至是3倍的时间和精力吗？我认为对不同的浏览器，可以采取适当的区分——让网站在现代浏览器如Firefox 3.5+、Chrome/Safari和Opera中实现最佳的表现，而在IE中实现相对比较差的界面——当然在不影响布局和功能的情况下。 号召你的朋友弃用IE6。号召你身边的朋友使用IE7/8或者Firefox、Chrome等浏览器。另外，很多人都有个人博客，可以在自己的博客上号召IE6用户升级他们的浏览器。你也可以参与到众多的促进IE6升级的在线项目中来，比如 webrebuild.org的IE６升级活动以及效果很不错的IE6 Update中。 浏览器厂商应该负更多的责任 想起的一句话：此地钱多人傻，速来！这当然只是笑话。 不过据说现在中国网民数量已经高达3.6亿！而且这个数字还在不断增长。这显然是一个巨大的市场。 所以最近各大公司纷纷涉足浏览器市场，各自都推出自有品牌的浏览器，在Maxthon、世界之窗、腾讯TT、绿色浏览器等混战多年的情况下又出现搜狐浏览器、新浪浏览器和360浏览器。但是它们无一不是以IE为内核的(maxthon和搜狐浏览器有IE和webkit双内核的版本)，没有自己的内核。所以各位网民，不要以为你用了所谓“安全”浏览器你的电脑就安全了，它的内核IE本身都是不安全的，这些外壳浏览器谈何安全——不过有些浏览器会添加一些可以避免你误操作的功能。 对国内的浏览器市场来说，我认为这种“战国纷争”的局面是很不错的，至少能够普及一点儿“浏览器”知识，提高网民对互联网和互联网安全的认识。 但是我认为国内的浏览器厂商应该负起更多的责任。 你们的浏览器产品确实有很多特色，也有很多很有用或者很酷的功能，比较重视中国人的使用习惯。但是当用户因为IE的漏洞而被攻击的时候，你们会承担责任吗？还是将责任推到微软那里？这似乎有些不公平哦～～ 对IE来说，最安全的、功能最强、稳定性最好的应该就是IE8了，如果你们能够推动用户去升级他们的内核到最新版，肯定能降低你们要为安全承担的风险。另外，减少一个内核支持也会减少你们的开发和维护支出吧。 总结 让IE6退出历史舞台，不是一朝一夕的事情，用户的惰性让他不愿意主动去升级，微软的浏览器升级模式又那么古老（而Firefox的提示升级和Chrome的后台自动升级模式倒省去了不少麻烦）。所以我们只有靠自己的力量来推动IE6的灭亡了。 转自：http://www.qianduan.net/let-ie6-faster-dead.html]]></description>
		<link>http://www.artcss.com/archives/569.html</link>
			</item>
</channel>
</rss>
