十年灯@博客园

摘要： 首先说明，这是一个未完成版本。最近一直在写这个XScroll.js，一直纠结于要不要发布出来，因为每次要发布的时候，我就觉得还没有写完善，还有bug，像个半吊子产品。但这两天我觉得，自己的javascript知识还是不足，如果等这个作品完善了才发布的话，我很担心要等到世界末日那天了。于是，我决定发布出来，当作学习过程的展示吧。XScroll.js介绍：更新：2012-4-13更新0.2版，加入了交错切换效果，示例页也已更新。XScroll是一个实现图片幻灯片切换的js类.目前支持(伪)17种切换效果。总代码量10KB。XScroll.js示例页这个类起源于我去年在淘宝电器城发现的效果，我发现他 阅读全文

摘要： 判断嘛，就是面临2个或以上的选项时进行选择。比如我家门前去公司有一个岔路，只要我第一次知道了哪一条路是对的，那我下一次或以后的每次都不用再思考了，直接走那条路即可——当然，突发天灾时不算。做出判断是需要时间的，是需要对应条件的。正确的判断很好，但每次面临岔路，哪怕是走了无数次的岔路，都来进行一下判断，无疑是一种脑残行为。下面来看一个我们平时经常看到的JS函数,他的作用是判断浏览器类型然后设置对应的透明度属性：function setAlpha(obj,alpha){ if (-[1,]) obj.style.opacity = alpha / 100; else ... 阅读全文

摘要： 只有思路，没有代码。这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果，一般分成两部分，一半是淡入，另一半就是淡出了。不过经过分析，我觉得其实只需要一半就行了。比如写一个图片切换类，切换效果是淡入淡出，通常我们会这样写：当切换发生的时候，当前显示的图片淡出（渐渐隐藏），将要显示的图片淡入（渐渐出现），通常两张图片的动画速度是一致的，以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。我们来列一个简单的步骤：当前图片渐隐，透明度由100%变成90%；同时下一张图片渐显，透明度由0变成10.当前图透明度80%，下张图透明度20%当前图70%，下张图30%。。。。。当 阅读全文

摘要： 这个问题本来希望发到论坛上讨论，但好像博客园没有论坛，可是博客园高手最多，所以小弟希望各位大牛们能看看我的问题，给我思路，就当这是论坛吧。十分感谢。问题如下：var o = 'left'; var o1 = {drt:'left'}; var o2 = ['left']; var obj = {o:333}; var obj1 = {o1[drt]:333}; var obj2 = {o2[0]:333};代码前三行是变量的几个不同声明方式，即普通变量、对象、数组；后三行分别调用了这3个变量并插入对象。问题来了：为什么obj1和obj2声明时就直 阅读全文

摘要： 之前我写过一篇关于CSS透明度的文章，抱怨CSS对一个元素设置透明度后，导致它里面的元素也跟着透明了。最近我发现，其实这样挺好的。有时候我们想要一个背景半透明文字不透明的效果，比如一个“信息警告框”，但当我们给这个元素加上opacity属性后，发现背景和他里面的所有东西都半透明了，导致辨认困难。如果你硬揪着opacity不放，你会发现用opacity来实现背景半透明文字不透明的效果很困难。于是，像我一样，觉得W3C关于透明度的设置真是蛋疼。其实，是我们理解错了。如果要背景半透明文字不透明这种效果，只要把background设置成rgba形式就可以了！如：background:rgba(0,0, 阅读全文

摘要： 昨天面试了一个做“用户交互设计”的人，颇有感触。趁着比较闲，写一篇优化网站的分页导航的文章吧，路过的请轻拍..所谓网站分页导航，就是如图所示的这种了：分页导航样式这张图片截取自我收集的一个分页导航制作网页。网站分页导航的作用，就是在单网页内容较多，需要分页显示的时候，提供给用户进行前后翻页，以便于浏览更多内容。在设计分页导航的时候，可参考这些要点：1，要有便捷的上一页下一页链接。因为用户在翻了几页后，一般都不清楚自己到底在哪一页了，此时通过上下页翻页，比用眼睛寻找页码判断页面然后翻页要方便的多。2，最好有页码。便于随意跳转。如果页码太多，最好有直接跳到最后页和最前页的链接。3，宽度不能限制死了 阅读全文

摘要： 转载，高手飘过。。。说来羞煞人：我一直没搞懂label与一个span标签有什么不同，貌似显示方式及作用都一样的。刚才发现，其实label标签最大的不同就在于他的for属性。label标签通常是写在表单（form）内的，他与一个普通的span最大的不同，就是可以和表单元素配对，比如文本框，单选框，复选框。而配对的方法，就是通过label的for属性。比如<inputtype="text"name=""id="text"/><labelfor="text">一个label，配文本框</la 阅读全文

摘要： 示例代码：<p style="float:left; width:300px;margin-right:30px;"><img src="xxx.jpg" alt="测试float与ol" /></p> <ol> <li>首先打开动作面板点右边的下拉菜单,选择载入动作</li> <li>选择要载入的动作文件</li> <li>载入后我们就可以在动作面板下面找到刚才载入的动作。</li> </ol>此时会看 阅读全文

摘要： 今天闲来无事，打算系统的整理一下常用的CSS以备以后使用。结果IE6不出所料的让我再次纠结了HTML代码：<div class=”test” style=”">ddaaaaaaaaaaaaaaaaaaaa</div> CSS代码：.test{position:absolute; top:300px;right:500px;left:0;bottom:0; zoom:1;_display:block;background-color:#000;color:#fff;}test是一个绝对定位的DIV，注意CSS代码中，并没有定义test的高度和宽度。虽然如此，但正 阅读全文

摘要： javascript Tab切换类LixTabs，更新至0.5版:受snandy的“读jquery”系列的启发，改进了代码，现在调用LixTabs时不用加new了。即可以这样写：var tab = Tabs();把原来的参数evt，改成了易理解的event(我的疏忽)总代码量：3.3KB示例页面：http://www.jo2.org/htmls/lixtabs/lixtabs.html昨天继续麻木的写JS时，突然！！我悟了！遂更新0.4版：终于支持自定义触发事件了，如'mouseover'或'click'因为1，所以增加了一个参数：evt,值举例：'mo 阅读全文