发表于

scrollup

一个简单的文字行向上滚动jQuery插件
这个也是为解决天成游戏玩家排名而写的

使用说明：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function(){
	$.fn.scrollup = function(options){
		var defaults = {showcount:5,speed:1000,interval:3000},options = $.extend(defaults,options);
		return this.each(function(){
			var thisObj = $(this),intervalId = 0;
			var sObj = {
				_resetHtml:function(_t,_o){
					_t.wrap("<div class='scrollWrap'></div>");
					$(".scrollWrap").css({"height":parseInt(_o.showcount)*parseInt(_t.children().outerHeight())+"px","overflow":"hidden"});
				},
				_active:function(_t,_o){
					_t.stop(true,true).animate({marginTop:parseInt(-_t.children().height())+"px"},_o.speed,function(){
						$(this).css({"marginTop":0}).children(":first").appendTo(_t);
					});
				},
				_bind:function(_t,_o){
					var $t = this;
					intervalId = setInterval(function(){
						$t._active(_t,_o);
					},_o.interval);
					_t.hover(
						function(){
							clearInterval(intervalId);
						},
						function(){
							intervalId = setInterval(function(){
								$t._active(_t,_o);
							},_o.interval);
						}
					);
				},
				init:function(obj,opt){
					if(obj.children().length > opt.showcount){
						this._resetHtml(obj,opt);
						this._bind(obj,opt);
					}
				}			
			};
			sObj.init(thisObj,options);
		});
	};
})(jQuery);
1
2
3
4
5
$("seleter").fn.scrollup({
    showcount:5, // 默认显示行数
    speed:1000, // 速度
    interval:3000 // 间隔
});

源码地址

发表于 | 分类于

fallspic

这个是为2014年ChinaJoy 世纪天成show girls展示页面而写的。
一个简单瀑布流照片jQuery插件。

使用说明：
1
2
3
4
$("selector").fallspic({
  picWidth:250, // picWidth 代表每张图片的宽度
  lineShowNum:4 //lineShowNum 代表每行显示多少张图片
});

查看源码

发表于 | 分类于

一个传送带jQuery插件！

这个小插件是2013年为解决天成各种活动页面中频繁使用的这个效果而写的。

使用说明：
1
2
3
4
5
6
7
$("selector").carousel({
    showCount:3, // 默认显示个数
    scrollCount:1, // 每次滚动的个数
    speed:1000, // 滚动的速度
    auto:true, // 是否自动滚动
    interval:3000 // 每次滚动之间的间隔时间
});

查看源码

发表于 | 分类于

showLayers

以前写的一个 jQuery 弹层插件。
弹出框的样式内容你自己定义，展示部分交给插件代码来完成。

使用说明：
1
2
3
4
5
6
7
8
$("selector").showLayers({
    closeLayer: {btn: "selector", auto: false, seconds: 3, callback: function () {}}, // 关闭层		
    maskLayer: {backgroundColor: "#000", transparent: "0.3"}, // 设置遮罩层的样式	
    mover: "selector", // 可以触发移动该层的 Selector	
    level: 1, // 正整数，数字越到层级越高，默认为 1	
    Scroll: boolean, // true 为随屏滚动 false 为不滚动，默认为 false
    callback: function () {}, // 触发此插件后执行的回调函数
})
1
$("selector").closeLayers(callback); // 用于其他事件关闭层，callback 为关闭层后执行的回调函数

查看源码

发表于 | 分类于

slider

一个幻灯片效果的jQuery插件！

这里其实是slider的第二个版本了，这个版本允许在一个页面中多次调用这个插件，每个幻灯片都各自自动播放着，互不影响。
当然还有完善的地方，比如给它加一些缓动效果。

使用说明：
1
2
3
4
5
6
7
8
9
$("selector").slider({
  bAutoPlay:true, // 是否自动播放
  interval:4000, // 每张图间隔时间
  bPrevNext:true, // 是否显示 '上一张' 和 '下一张' 按钮
  direction:"upDown", // 图片滚动方向
  bPagenation:true, // 是否相识页面
  pageStyle:"number", // 页面的格式 number or icon
  speed:400 // 滚动的速度
});

查看源码