早前为一位博友写了一个走马灯效果(增强型走马灯公告栏,可以抛弃marquee标签了,点击看效果),但时是基于jQuery库写的。效果实现的优点牵强。而且当时的效果是页面加载完后一片空白,只有开始播放后才从底部出来。
年前用wordpress给公司做内部信息分享平台时,有一块是用来横向无限循环播放展示team building的图片。之前的效果不适合,便又写了一段原生的js来实现。主要实现原理是间隔时间地设置一个overflow:hidden;的div的scrollLeft。
很长时间没有更新了,也很久没有做实例分享了。最近比较动荡,也比较忙,所以博客的更新频率也变了。
今天的实例算是很小的了吧,是在之前公司的公司网上做的效果,今天朋友让我扣出来给他。我便做了份,整理了分享出来给大家参考。
近期因新工作需要,在学习XML和XSLT相关的知识,以后也会在博客中记录一些学习笔记!
大家看到这个图片播放效果的演示后一定觉得很熟悉吧,因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果,有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的,所以也是使用比较广泛的。
在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果,那个时候我的Js不好,纯粹是拿了代码后套进内容,然后放到网上去就万事OK了。现在不一样了,JS编程熟悉了,jQuery库更是熟悉,便觉得原始的代码怎么看都不爽,昨天终于将该效果的JS代码重写了一下,贴出来与大家分享!
分享一个我做的图片轮换展示效果,主要实现原理:通过设置非第一个图片的position,通过overflow:hidden属性隐藏,再使用jQuery的animate效果函数作出链性轮换的效果。
轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件,喜欢修改的朋友可以自行修改!另压缩包中的源码没有添加注释,不懂的请阅读本文中的注释。
PS:jQuery库请根据源码的路径自行加入,压缩包中不提供下载。
今天在阅读Nettuts+的Feed时看到了这个模拟键盘的效果,很是喜欢。便查看的源码后,了解了实现的原理,自己重新编写了CSS和JS代码,现效果如下:
外部链接查看效果:Demo,源代码下载:Download
前段时间在国外的博客上看到这个jQuery的书籍展示效果,觉得很是不错,并下载了源码,自己重新编写了CSS和JS,效果:如下
说明:因为在此页面中是通过使用iframe标签引入外部页面,加上显示页面的宽度有限,所以当鼠标移动到Info图标上时,部分内容被遮盖住,这时你可以通过外部链接查看:Demo
源代码下载
使用css编写的一个动态分页效果,通过使用opacity和filter实现透明效果,分页效果如下:
今天不知怎的,一直在做tab的特效,看到MSN官网的tab效果不错,就花了一点点时间小做了一下,具体效果:如下
一直都很喜欢迅雷网站的设计,前端时间迅雷更新的主页的css风格,没了以前的tab效果,多了点变幻滑动的效果。
今天花了点时间,模仿了一下当前迅雷主页上的热点电视、电影的滑动效果简简单单的6行代码实现tab滑动门效果:如下