javascript 图片幻灯片切换类:XScroll.js发布

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

提高javascript效率:一次判断,而不要次次判断

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

换个思路:javascript淡入淡出效果

摘要: 只有思路,没有代码。这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。我们来列一个简单的步骤:当前图片渐隐,透明度由100%变成90%;同时下一张图片渐显,透明度由0变成10.当前图透明度80%,下张图透明度20%当前图70%,下张图30%。。。。。当 阅读全文
posted @ 2012-03-13 11:51 十年灯 阅读(688) 评论(0) 推荐(0) 编辑

javascript:将变量值传入对象时的问题

摘要: 这个问题本来希望发到论坛上讨论,但好像博客园没有论坛,可是博客园高手最多,所以小弟希望各位大牛们能看看我的问题,给我思路,就当这是论坛吧。十分感谢。问题如下: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声明时就直 阅读全文
posted @ 2012-02-27 18:00 十年灯 阅读(458) 评论(5) 推荐(0) 编辑

CSS设置透明度与rgba颜色模式

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

网站分页导航样式改良计划

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

基础HTML: label标签的for属性

摘要: 转载,高手飘过。。。说来羞煞人:我一直没搞懂label与一个span标签有什么不同,貌似显示方式及作用都一样的。刚才发现,其实label标签最大的不同就在于他的for属性。label标签通常是写在表单(form)内的,他与一个普通的span最大的不同,就是可以和表单元素配对,比如文本框,单选框,复选框。而配对的方法,就是通过label的for属性。比如<inputtype="text"name=""id="text"/><labelfor="text">一个label,配文本框</la 阅读全文
posted @ 2011-10-19 10:05 十年灯 阅读(11251) 评论(13) 推荐(4) 编辑

UL,OL前有float元素导致定位bug

摘要: 示例代码:<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>此时会看 阅读全文
posted @ 2011-09-21 11:54 十年灯 阅读(468) 评论(5) 推荐(0) 编辑

position:absolute绝对定位在IE6下的奇特表现

摘要: 今天闲来无事,打算系统的整理一下常用的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的高度和宽度。虽然如此,但正 阅读全文
posted @ 2011-07-22 16:35 十年灯 阅读(2452) 评论(9) 推荐(1) 编辑

javascript tab切换类LixTabs最新版

摘要: 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 阅读全文
posted @ 2011-07-08 11:25 十年灯 阅读(1396) 评论(4) 推荐(2) 编辑