分类目录归档:我的作品

与我工作相关的一些作品

Javascript分页组件:xPagination.js

加入新公司后,一直忙得飞起。由于在新公司的工作包括写一些公用组件,比如日历啊,分页啊什么的,这个分页组件我觉得要用的人比较多,所以把它独立了出来,做成了一个无依赖的原生JS版本,供需要的人使用。

注:新公司使用了一个自己的框架,写组件的方式与jQuery或原生JS都不一样,所以要做提取工作。

xPagination.js参数说明,示例,在线预览请见:http://wslx520.github.io/pagination/index.html

xPagination.js源码请见:Github

本文只是说明一下写这个组件的一些思路,仅供参考。 继续阅读Javascript分页组件:xPagination.js

javascript马赛克遮罩图片切换效果:XMosaic.js

新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换。

在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了。
XMosaic.js,与XScroll.jsXScroll2.js一样,都是用来制作单张图片切换特效的javascript类,不过,迄今为止XMosaic.js实现的特效是最炫的,炫到我以后很长一段时间都不用再写图片切换类了。

XMosaic.js,马赛克图片切换特效示例页

Github地址

XMosaic.js的使用方法请查看示例页源代码。其中html结构与一般图片切换的html结构无异,如:

<div id="jsF">
<a href="#" title=""><img src="../s1.jpg" alt="" /></a>
<a href="#" title=""><img src="../s2.jpg" alt="" /></a>
<a href="#" title=""><img src="../s3.jpg" alt="" /></a>
<a href="#" title=""><img src="../s4.jpg" alt="" /></a>
</div>

此时,你只需要以下这句js,就能实现马赛克切换效果: 继续阅读javascript马赛克遮罩图片切换效果:XMosaic.js

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

最近一直在写这个XScroll.js,一直纠结于要不要发布出来,因为每次要发布的时候,我就觉得还没有写完善,还有bug,像个半吊子产品。但这两天我觉得,自己的javascript知识还是不足,如果等这个作品完善了才发布的话,我很担心要等到世界末日那天了。于是,我决定发布出来,当作学习过程的展示吧。

XScroll.js示例页 Github地址

继续阅读javascript图片幻灯片切换类:XScroll.js

jQuery Tab选项卡切换插件:jquery.lixtabs.js

这是我自己写的一个jquery插件,由功能相同的纯JS版LixTabs改造而来。这也是我的第一个jquery插件,嘿嘿。

所以,jquery.lixtabs.js的参数和原版LixTabs一模一样,不过多了一个参数:how,规定tab内容区出现的方式,值是jQuery自带的变化效果,如fadeIn,slideDown,show等等(其实全部的值就这三个);另外,去掉了原来的两个参数:hdtag与bdtag,即tab头部与内容区的html标签,因为我觉得对于强大的jQuery来说,这两个标签已经不必要了。

lixtabs插件使用效果预览 继续阅读jQuery Tab选项卡切换插件:jquery.lixtabs.js

Javascript TAB选项卡切换类:LixTabs.js最新版

LixTabs.js是我之前因为工作原因而写的一个小JS类,主要作用是批量实现Tab切换效果。之前已经在博客园发布过两个版本了,虽然依然有缺点但还是在艰难地改进着。

2013/9/17更新:
原来的tabs.js有一个漏洞,替换class的时候用的是字符串,有bug,比如此标签有content on两个class,本来只想去掉on,却变成了ctent ,把content里的on也去掉了。

这是个很低级的错误,但我一直都没发现真是奇迹。现在改成了正则表达式,且优化了替换class的函数,减少了计算量,且Tabs.js的整体代码量还变小了,<3Kb.

另外废话几句,其中的cutover(切换样式)函数,里面有些值得学习的地方,想提高JS水平的可以看下,如果不明白欢迎联系我。

LixTabs最新版(0.5)特性说明:

  1. 在同一网页方便的实现多个tab选项卡切换效果
  2. 也可以用来实现简单的图片切换效果
  3. 整体封装,但调用时不用写new
  4. 可以设置触发延迟,所以当鼠标飞速的移入移出tab标签不会触发切换
  5. 代码精简,迄今为止代码大小:3.3KB
  6. 因为精简,所以切换没有特效(如淡入淡出等)

LixTabs效果示例页

继续阅读Javascript TAB选项卡切换类:LixTabs.js最新版

收费淘宝客主题:xTaoke加强版

我的wordpress主题:淘宝客主题xTaoke加强版新鲜发布!

加强版由原来的xTaoke主题升级而来,保留xTaoke的所有功能,并加入了更多功能,持续更新中!

 售价:49元/套。自3月20日起涨价至69元/套,老用户免费升级。

共计10套,已售出9。售完即止。

购买地址:http://buyibang.com/o/xtaoke 预览地址:http://buyibang.com/ 

原有功能可到xTaoke主题发布页查看,新增功能介绍如下:

 2012-03-19更新至1.4版: 

1,支持独立的文章分类了。 

文章分类即非商品文章的分类,可以设置不在网站首页显示。

文章分类的文章列表是另外一个模版,和首页的商品列表样式不同;文章分类下的文章详细页侧边栏不会出现商品信息框。 

2,支持直接在后台输入独立文章分类的ID 

文章分类ID请在后台–文章–分类目录下获得。

  2012-02-10更新

  1. 重要:将原来的广告输出方式改为JS延迟载入。将广告位对搜索引擎进行了隐藏,以避免因alimama广告代码被百度惩罚。
  2. 可以设置首页每行显示的图片数量了。默认4,可选择3、4、5、6.
  3. 优化了部分源代码。

xTaoke加强版原版: 

1,方便的自定义网站logo 继续阅读收费淘宝客主题:xTaoke加强版

wordpress淘宝客主题发布:xTaoke

wordpress淘宝客主题:xTaoke,作者脚儿网。这里是xTaoke的发布专页,提供xTaoke的使用说明及更新信息。如果发现xTaoke的bug,或有什么使用问题,可以联系我。我的联系方式在右侧边栏。

也可加Q群:23860681 进行讨论

已知bug说明:如主题报 …/avatar/xxx.jpg 或 …/avatar/default.jpg 类似的错误,原因在于此主题里启用了一个缓存头像的函数而你的wp没有这个目录,你可以在你的wp根目录下新建一个avatar文件夹,并放入一张叫default.jpg的头像图片,即可修复此bug. 如果你不需要缓存头像的功能,可以联系我去掉相关代码。

更强大的功能可以查看:xTaoke加强版.69元!

2012-02-14更新:

修复了侧边栏问题

1.2.2版下载:点这里

2012-01-06更新:

重大bug:由于默认的windows文档上传到linux空间后,php文件全部变成了不换行的形式,导致主题错误百出。这是我的疏忽,我很抱歉。

2011-12-15更新

更新至1.2版,更新内容:

  1. 现在显示原价格了
  2. css样式大修改(查看
  3. 用js输出淘宝搜索框
  4. 其他小优化

1.2版下载地址:作废!

2011-12-02更新:

wordpress淘宝客主题xTaoke,现更新至1.1版,更新说明:

  1. 对淘宝客链接进行了加密。现在的链接形式是http://buyibang.com/out/?url=87,点击后会读取真正的淘宝客链接并跳转
  2. 其他使用方式依旧,布衣帮已同步更新,可以查看效果
  3. 下载地址:见更新

2011-11-30:

这是我第一次发布主题。其实这个主题原型是一个韩国图片主题,我拿来修修改改,基本没有原样了。本来只想自己用,不过因为一点点的虚荣心,我决定放出来给有需要的朋友使用,从而也可以对此主题进行完善。

主题暂命名为:xTaoke,版本号现为1.0,作者是本人:十年灯,下载地址:见更新

主题图片预览:首页

xtaoke预览图1
xtaoke预览图1

继续阅读wordpress淘宝客主题发布:xTaoke