jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼
更新時(shí)間：2012年04月12日 16:48:55 作者：
jQuery UI Dialog是jQuery UI的彈出對(duì)話框組件，使用它可以創(chuàng)建各種美觀的彈出對(duì)話框；它可以設(shè)置對(duì)話框的標(biāo)題、內(nèi)容，并且使對(duì)話框可以拖動(dòng)、調(diào)整大小、及關(guān)閉；平常主要用來(lái)替代瀏覽囂自帶的alert、confirm、open等方法
主要參數(shù)
jQuery UI Dialog常用的參數(shù)有：
1、autoOpen：默認(rèn)true，即dialog方法創(chuàng)建就顯示對(duì)話框
2、buttons：默認(rèn)無(wú)，用于設(shè)置顯示的按鈕，可以是JSON和Array形式:
{"確定":function(){},"取消":function(){}}
[{text:"確定", click: function(){}},{text:"取消",click:function(){}}]
3、modal：默認(rèn)false，是否模態(tài)對(duì)話框，如果設(shè)置為true則會(huì)創(chuàng)建一個(gè)遮罩層把頁(yè)面其他元素遮住
4、title：標(biāo)題
5、draggable：是否可手動(dòng)，默認(rèn)true
6、resizable：是否可調(diào)整大小，默認(rèn)true
7、width：寬度，默認(rèn)300
8、height：高度，默認(rèn)"auto"
其他一些不太常用的參數(shù)：
1、closeOnEscape：默認(rèn)true，按esc鍵關(guān)閉對(duì)話框
2、show：打開對(duì)話框的動(dòng)畫效果
3、hide：關(guān)閉對(duì)話框的動(dòng)畫效果
4、position：對(duì)話框顯示的位置，默認(rèn)"center"，可以設(shè)置成字符串或數(shù)組：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，通過(guò)上面的幾個(gè)字符串組合(x,y)
[350,100]，絕對(duì)的數(shù)值(x,y)
5、minWidth：默認(rèn)150，最小寬度
6、minHeight：默認(rèn)150，最小高度
使用方法：
$("...").dialog({
title: "標(biāo)題",
//...更多參數(shù)
});
主要方法
jQuery UI Dialog提供了一些方法來(lái)控制對(duì)話框，僅列出常用的：
open：打開對(duì)話框
close：關(guān)閉對(duì)話框（通過(guò)close不會(huì)銷毀，還能繼續(xù)使用）
destroy：銷毀對(duì)話框
option：設(shè)置參數(shù)，即前面列出的參數(shù)
使用的時(shí)候作為dialog方法的參數(shù)：
var dlg = $("...").dialog({
//...各種參數(shù)
});
dlg.dialog("option", { title: "標(biāo)題" }); // 設(shè)置參數(shù)
dlg.dialog("open"); // 使用open方法打開對(duì)話框
主要事件
jQuery UI Dialog提供了一些事件，比如打開、關(guān)閉對(duì)話框的時(shí)候做一些額外的事情：
open：打開時(shí)
close：關(guān)閉時(shí)
create：創(chuàng)建時(shí)
resize：調(diào)整大小時(shí)
drag：拖動(dòng)時(shí)
使用方法同參數(shù)的使用方法，比如在打開時(shí)隱藏關(guān)閉按鈕：
$("...").dialog({
//...各種參數(shù)
open: function(event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
}
});
具體使用
以下封裝了一些常用的提示信息，不再詳細(xì)解釋：
jQuery.extend(jQuery, {
// jQuery UI alert彈出提示
jqalert: function(text, title, fn) {
var html =
'<div class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</div>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
}
}
});
},
// jQuery UI alert彈出提示,一定間隔之后自動(dòng)關(guān)閉
jqtimeralert: function(text, title, fn, timerMax) {
var dd = $(
'<div class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</div>');
dd[0].timerMax = timerMax || 3;
return dd.dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
open: function(e, ui) {
var me = this,
dlg = $(this),
btn = dlg.parent().find(".ui-button-text").text("確定(" + me.timerMax + ")");
--me.timerMax;
me.timer = window.setInterval(function() {
btn.text("確定(" + me.timerMax + ")");
if (me.timerMax-- <= 0) {
dlg.dialog("close");
fn && fn.call(dlg);
window.clearInterval(me.timer); // 時(shí)間到了清除計(jì)時(shí)器
}
}, 1000);
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
window.clearInterval(this.timer); // 清除計(jì)時(shí)器
}
},
close: function() {
window.clearInterval(this.timer); // 清除計(jì)時(shí)器
}
});
},
// jQuery UI confirm彈出確認(rèn)提示
jqconfirm: function(text, title, fn1, fn2) {
var html =
'<div class="dialog" id="dialog-confirm">' +
' <p>' +
' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text +
' </p>' +
'</div>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn1 && fn1.call(dlg, true);
},
"取消": function() {
var dlg = $(this).dialog("close");
fn2 && fn2(dlg, false);
}
}
});
},
// jQuery UI 彈出iframe窗口
jqopen: function(url, options) {
var html =
'<div class="dialog" id="dialog-window" title="提示信息">' +
' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' +
'</div>';
return $(html).dialog($.extend({
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
close: function(event, ui) {
$(this).dialog("destroy"); // 關(guān)閉時(shí)銷毀
}
}, options));
},
// jQuery UI confirm提示
confirm: function(evt, text, title) {
evt = $.event.fix(evt);
var me = evt.target;
if (me.confirmResult) {
me.confirmResult = false;
return true;
}
jQuery.jqconfirm(text, title, function(e) {
me.confirmResult = true;
if (e) {
if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {
$.globalEval(me.href);
me.confirmResult = false;
return;
}
var t = me.type && me.type.toLowerCase();
if (t && me.name && (t == "image" || t == "submit" || t == "button")) {
__doPostBack(me.name, "");
me.confirmResult = false;
return;
}
if (me.click) me.click(evt);
}
return false;
});
return false;
}
});
以上代碼還存在一個(gè)問(wèn)題，就是每次彈出框關(guān)閉之后都沒(méi)有銷毀。
解決辦法有（具體不演示）：
在close事件里面destroy
把a(bǔ)lert/confirm提供里的dialog實(shí)例設(shè)置成靜態(tài)的
在外部調(diào)用使用單個(gè)dialog實(shí)例
演示程序
html代碼如下：
<div>
<input type="button" id="button1" value="普通提示" />
<input type="button" id="button2" value="自動(dòng)關(guān)閉提示" />
<input type="button" id="button3" value="確認(rèn)提示" />
<input type="button" id="button4" value="確認(rèn)提示2" />
<input type="button" id="button5" value="打開窗口" />
</div>
相應(yīng)js代碼如下：
$(function() {
$("#button1").click(function() {
$.jqalert("這是普通提示！");
});
$("#button2").click(function() {
$.jqtimeralert("這是自動(dòng)關(guān)閉的提示！", "自動(dòng)關(guān)閉提示",
function() {
$.jqalert("時(shí)間到");
});
});
$("#button3").click(function() {
$.jqconfirm("確定要這么做嗎？", "確認(rèn)提示",
function() {
$.jqalert("點(diǎn)了確定");
},
function() {
$.jqalert("點(diǎn)了取消");
});
});
$("#button4").click(function(e) {
if ($.confirm(e, "確定要這么做嗎？"))
$.jqalert("點(diǎn)了確定");
});
$("#button5").click(function(e) {
$.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 });
});
});
對(duì)于服務(wù)器端控件使用confirm，可能需要如下方法：
$("#button4").click(function(e) {
if (!$.confirm(e, "確定要這么做嗎？")) {
e.stopPropagation();
return false;
}
});
額外再提一下，jQuery UI使用的字體都是以em為單位，可能會(huì)導(dǎo)致平常使用時(shí)dialog變得比較大，可以額外設(shè)置以下樣式：
body { font-size: 12px; } // 默認(rèn)字體大小
/*jQuery UI fakes*/
.ui-widget { font-size: 1em; }
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }
這樣子，dialog的大小看起來(lái)就比較正常了。
在Telerik RadControls for asp.net ajax中使用
主要是針對(duì)telerik RadButton控件，定義如下兩個(gè)函數(shù)：
// 用于RadButton的confirm確認(rèn)回調(diào)，即觸發(fā)按鈕點(diǎn)擊
function radcallback(s) {
return Function.createDelegate(s, function(argument) {
if (argument) {
this.click();
}
});
}
// 用于為RadButton添加confirm提示
function radconfirm2(textOrFn, title, callback) {
return function(s, e) {
$.jqconfirm(textOrFn, title, callback || radcallback(s));
//radconfirm(textOrFn, callback, 280, 50, null, title);
e.set_cancel(true);
};
}
然后可以這樣使用：
結(jié)尾
更多的資料請(qǐng)看jQuery UI Dialog官方演示：http://jqueryui.com/demos/dialog。
腳本之家下載地址 http://www.dbjr.com.cn/jiaoben/15574.html
本文演示下載 lwme-jquery-ui-dialog-demo.7z
作者：囧月
出處：http://lwme.cnblogs.com/
jQuery UI Dialog常用的參數(shù)有：
1、autoOpen：默認(rèn)true，即dialog方法創(chuàng)建就顯示對(duì)話框
2、buttons：默認(rèn)無(wú)，用于設(shè)置顯示的按鈕，可以是JSON和Array形式:
{"確定":function(){},"取消":function(){}}
[{text:"確定", click: function(){}},{text:"取消",click:function(){}}]
3、modal：默認(rèn)false，是否模態(tài)對(duì)話框，如果設(shè)置為true則會(huì)創(chuàng)建一個(gè)遮罩層把頁(yè)面其他元素遮住
4、title：標(biāo)題
5、draggable：是否可手動(dòng)，默認(rèn)true
6、resizable：是否可調(diào)整大小，默認(rèn)true
7、width：寬度，默認(rèn)300
8、height：高度，默認(rèn)"auto"
其他一些不太常用的參數(shù)：
1、closeOnEscape：默認(rèn)true，按esc鍵關(guān)閉對(duì)話框
2、show：打開對(duì)話框的動(dòng)畫效果
3、hide：關(guān)閉對(duì)話框的動(dòng)畫效果
4、position：對(duì)話框顯示的位置，默認(rèn)"center"，可以設(shè)置成字符串或數(shù)組：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，通過(guò)上面的幾個(gè)字符串組合(x,y)
[350,100]，絕對(duì)的數(shù)值(x,y)
5、minWidth：默認(rèn)150，最小寬度
6、minHeight：默認(rèn)150，最小高度
使用方法：
復(fù)制代碼 代碼如下:
$("...").dialog({
title: "標(biāo)題",
//...更多參數(shù)
});
主要方法
jQuery UI Dialog提供了一些方法來(lái)控制對(duì)話框，僅列出常用的：
open：打開對(duì)話框
close：關(guān)閉對(duì)話框（通過(guò)close不會(huì)銷毀，還能繼續(xù)使用）
destroy：銷毀對(duì)話框
option：設(shè)置參數(shù)，即前面列出的參數(shù)
使用的時(shí)候作為dialog方法的參數(shù)：
復(fù)制代碼 代碼如下:
var dlg = $("...").dialog({
//...各種參數(shù)
});
dlg.dialog("option", { title: "標(biāo)題" }); // 設(shè)置參數(shù)
dlg.dialog("open"); // 使用open方法打開對(duì)話框
主要事件
jQuery UI Dialog提供了一些事件，比如打開、關(guān)閉對(duì)話框的時(shí)候做一些額外的事情：
open：打開時(shí)
close：關(guān)閉時(shí)
create：創(chuàng)建時(shí)
resize：調(diào)整大小時(shí)
drag：拖動(dòng)時(shí)
使用方法同參數(shù)的使用方法，比如在打開時(shí)隱藏關(guān)閉按鈕：
復(fù)制代碼 代碼如下:
$("...").dialog({
//...各種參數(shù)
open: function(event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
}
});
具體使用
以下封裝了一些常用的提示信息，不再詳細(xì)解釋：
復(fù)制代碼 代碼如下:
jQuery.extend(jQuery, {
// jQuery UI alert彈出提示
jqalert: function(text, title, fn) {
var html =
'<div class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</div>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
}
}
});
},
// jQuery UI alert彈出提示,一定間隔之后自動(dòng)關(guān)閉
jqtimeralert: function(text, title, fn, timerMax) {
var dd = $(
'<div class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</div>');
dd[0].timerMax = timerMax || 3;
return dd.dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
open: function(e, ui) {
var me = this,
dlg = $(this),
btn = dlg.parent().find(".ui-button-text").text("確定(" + me.timerMax + ")");
--me.timerMax;
me.timer = window.setInterval(function() {
btn.text("確定(" + me.timerMax + ")");
if (me.timerMax-- <= 0) {
dlg.dialog("close");
fn && fn.call(dlg);
window.clearInterval(me.timer); // 時(shí)間到了清除計(jì)時(shí)器
}
}, 1000);
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
window.clearInterval(this.timer); // 清除計(jì)時(shí)器
}
},
close: function() {
window.clearInterval(this.timer); // 清除計(jì)時(shí)器
}
});
},
// jQuery UI confirm彈出確認(rèn)提示
jqconfirm: function(text, title, fn1, fn2) {
var html =
'<div class="dialog" id="dialog-confirm">' +
' <p>' +
' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text +
' </p>' +
'</div>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn1 && fn1.call(dlg, true);
},
"取消": function() {
var dlg = $(this).dialog("close");
fn2 && fn2(dlg, false);
}
}
});
},
// jQuery UI 彈出iframe窗口
jqopen: function(url, options) {
var html =
'<div class="dialog" id="dialog-window" title="提示信息">' +
' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' +
'</div>';
return $(html).dialog($.extend({
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
close: function(event, ui) {
$(this).dialog("destroy"); // 關(guān)閉時(shí)銷毀
}
}, options));
},
// jQuery UI confirm提示
confirm: function(evt, text, title) {
evt = $.event.fix(evt);
var me = evt.target;
if (me.confirmResult) {
me.confirmResult = false;
return true;
}
jQuery.jqconfirm(text, title, function(e) {
me.confirmResult = true;
if (e) {
if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {
$.globalEval(me.href);
me.confirmResult = false;
return;
}
var t = me.type && me.type.toLowerCase();
if (t && me.name && (t == "image" || t == "submit" || t == "button")) {
__doPostBack(me.name, "");
me.confirmResult = false;
return;
}
if (me.click) me.click(evt);
}
return false;
});
return false;
}
});
以上代碼還存在一個(gè)問(wèn)題，就是每次彈出框關(guān)閉之后都沒(méi)有銷毀。
解決辦法有（具體不演示）：
在close事件里面destroy
把a(bǔ)lert/confirm提供里的dialog實(shí)例設(shè)置成靜態(tài)的
在外部調(diào)用使用單個(gè)dialog實(shí)例
演示程序
html代碼如下：
復(fù)制代碼 代碼如下:
<div>
<input type="button" id="button1" value="普通提示" />
<input type="button" id="button2" value="自動(dòng)關(guān)閉提示" />
<input type="button" id="button3" value="確認(rèn)提示" />
<input type="button" id="button4" value="確認(rèn)提示2" />
<input type="button" id="button5" value="打開窗口" />
</div>
相應(yīng)js代碼如下：
復(fù)制代碼 代碼如下:
$(function() {
$("#button1").click(function() {
$.jqalert("這是普通提示！");
});
$("#button2").click(function() {
$.jqtimeralert("這是自動(dòng)關(guān)閉的提示！", "自動(dòng)關(guān)閉提示",
function() {
$.jqalert("時(shí)間到");
});
});
$("#button3").click(function() {
$.jqconfirm("確定要這么做嗎？", "確認(rèn)提示",
function() {
$.jqalert("點(diǎn)了確定");
},
function() {
$.jqalert("點(diǎn)了取消");
});
});
$("#button4").click(function(e) {
if ($.confirm(e, "確定要這么做嗎？"))
$.jqalert("點(diǎn)了確定");
});
$("#button5").click(function(e) {
$.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 });
});
});
對(duì)于服務(wù)器端控件使用confirm，可能需要如下方法：
復(fù)制代碼 代碼如下:
$("#button4").click(function(e) {
if (!$.confirm(e, "確定要這么做嗎？")) {
e.stopPropagation();
return false;
}
});
額外再提一下，jQuery UI使用的字體都是以em為單位，可能會(huì)導(dǎo)致平常使用時(shí)dialog變得比較大，可以額外設(shè)置以下樣式：
復(fù)制代碼 代碼如下:
body { font-size: 12px; } // 默認(rèn)字體大小
/*jQuery UI fakes*/
.ui-widget { font-size: 1em; }
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }
這樣子，dialog的大小看起來(lái)就比較正常了。
在Telerik RadControls for asp.net ajax中使用
主要是針對(duì)telerik RadButton控件，定義如下兩個(gè)函數(shù)：
復(fù)制代碼 代碼如下:
// 用于RadButton的confirm確認(rèn)回調(diào)，即觸發(fā)按鈕點(diǎn)擊
function radcallback(s) {
return Function.createDelegate(s, function(argument) {
if (argument) {
this.click();
}
});
}
// 用于為RadButton添加confirm提示
function radconfirm2(textOrFn, title, callback) {
return function(s, e) {
$.jqconfirm(textOrFn, title, callback || radcallback(s));
//radconfirm(textOrFn, callback, 280, 50, null, title);
e.set_cancel(true);
};
}
然后可以這樣使用：
復(fù)制代碼 代碼如下:
<telerik:RadButton ... OnClientClicking="radconfirm2('確定要這么做嗎?')" />
結(jié)尾
更多的資料請(qǐng)看jQuery UI Dialog官方演示：http://jqueryui.com/demos/dialog。
腳本之家下載地址 http://www.dbjr.com.cn/jiaoben/15574.html
本文演示下載 lwme-jquery-ui-dialog-demo.7z
作者：囧月
出處：http://lwme.cnblogs.com/
您可能感興趣的文章:
- JQuery EasyUI 對(duì)話框的使用方法
- jQuery Dialog 彈出層對(duì)話框插件
- 基于jQuery的彈出警告對(duì)話框美化插件(警告，確認(rèn)和提示)
- jquery刪除提示框彈出是否刪除對(duì)話框
- 修改jquery里的dialog對(duì)話框插件為框架頁(yè)(iframe) 的方法
- Confirmer JQuery確認(rèn)對(duì)話框組件
- jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
- jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析
- jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見(jiàn)使用問(wèn)題解答
- jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框
相關(guān)文章
最近遇到個(gè)問(wèn)題，同時(shí)引用了jquery庫(kù)和另外一個(gè)js庫(kù)。當(dāng)用$XX去調(diào)用js庫(kù)函數(shù)時(shí)，發(fā)現(xiàn)失效了！于是找資料，原來(lái)是jquery命名沖突了2012-03-03
這篇文章主要介紹了jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery 中$(this).index與$.each的使用指南
這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法，以及使用環(huán)境，有需要的小伙伴自己參考下吧2014-11-11
jQuery仿淘寶網(wǎng)產(chǎn)品品牌隱藏與顯示效果
這篇文章主要介紹了jQuery仿淘寶網(wǎng)產(chǎn)品品牌隱藏與顯示效果,通過(guò)jquery鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素的顯示與隱藏功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
jQuery使用$.each遍歷json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery使用$.each遍歷json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了each方法遍歷json數(shù)組的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-04-04
這篇文章主要介紹了利用瀏覽器全屏api實(shí)現(xiàn)js全屏的代碼示例,示例中使用了jquery，把這個(gè)庫(kù)的地址改成自己的，大家參考使用吧2014-01-01
關(guān)于query Javascript CSS Selector engine
本篇文章，小編將為大家介紹，關(guān)于query Javascript CSS Selector engine，有需要的朋友可以參考一下2013-04-04
jquery isEmptyObject判斷是否為空對(duì)象的函數(shù)
jQuery 判斷一個(gè)對(duì)象是否為空是使用for name in obj 來(lái)遍歷對(duì)象中的屬性名.2011-02-02
通過(guò)Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json
這篇文章主要介紹了通過(guò)Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json,需要的朋友可以參考下2014-05-05
jQuery插件slicebox實(shí)現(xiàn)3D動(dòng)畫圖片輪播切換特效
Slicebox是一款效果非常華麗的jquery和css3 3d幻燈片插件。Slicebox幻燈片插件能夠?qū)D片切片，然后做3d旋轉(zhuǎn)。Slicebox幻燈片插件共有4種效果，視覺(jué)沖擊感非常強(qiáng)。2015-04-04