focusbox « 佐佐制造

幻灯片轮换-102 (kakaFocus)

2010年06月4日 分类: 网页开发的

焦点图片轮换-kakaFocus

在卡卡小朋友多次的催促下，把结束了的命名为kakaFocus幻灯片轮换。

有一些跟以前和现在网上常解决想法的不同点是，当滚动到末张时，不倒退回第一张，而进行继续往下走的方式，这样会给更喜感视觉享受，是不是可以说这好比无间断跑马灯的。

在制作间我在给右下角小圆角(节点banner_pages下)使用a标签进行背景图片处理，然后文字text-indent:-9999px; 并对小图点进行浮动hover效果background-position定位移动处理，在IE6下会有严重的闪动现象。无奈选用了在body处加如下代码实现

~~onload=”document.execCommand(‘BackgroundImageCache’,false,true)”~~

后想如果把a标签改成span,并对span:hover效果处理，对hover伪类在IE6中得不到很好的支持进行抛弃。从而达到IE6闪动的解决。

.banner_pages li span { .. }
.banner_pages li span:hover { … }

2010年02月24日 分类: 网页开发的

focusbox-101

幻灯片轮换展现着页面重要信息，一个独特并富有创意幻灯效果总是常常吸引着我。它包含着设计师的想象力和前端制作者的巧妙处理手法。这因为如此喜欢，每当碰到好的幻灯片和好的构想时，总是想自己动手去写它。以101为编号，以后递加。

喜点：

输出循环图片列表即可；

鼠标移进幻灯片时停止自动切换；

左右按钮进行切换调整；

右下角小点按钮可切换，切换后有直观进度反映；

自动切换有右上角有进度Loading反映(偶最喜欢的喜点);