相冊部分用到了遮罩層效果。之前在一次項(xiàng)目中也有用到過，只是那時(shí)候還不知道可以使用插件呢，呵呵
主要在兩個(gè)地方使用了這個(gè)效果，第一是創(chuàng)建相冊，第二是圖片查看，類似于QQ空間里照片查看的效果。發(fā)現(xiàn)使用插件真真的可以很快的實(shí)現(xiàn)，效果也是蠻好的。
nyroModal官方網(wǎng)站為：http://nyromodal.nyrodev.com/
強(qiáng)大的 遮罩層， 它包括以下功能：
以ajax遠(yuǎn)程加載內(nèi)容
以ajax加載內(nèi)容
顯示圖片
對話框
iframe
等等……
使用起來非常簡單，可參考：
http://www.cnblogs.com/lynnlin/archive/2011/11/02/2233072.html
http://www.cnblogs.com/ideas/archive/2009/09/04/jquery-nyromodal.html
使用方法：
1.引入jquery.nyroModal-1.6.2.pack.js
2.給nyroModal層添加樣式，如關(guān)閉按鈕，加載等樣式
jQuery彈出層nyroModal的使用
圖片為附件中的對應(yīng)圖片
3.寫頁面內(nèi)容
<body>
<a href="#out" id="aa">彈出</a>
<div id="out" style="display: none; width:200px; height:100px">
彈出層的內(nèi)容:
<input id="content" type="text">
</div>
</body>
其中超鏈接的href中#后面的要對應(yīng)彈出層的id，其中id為out的層，style中的樣式為彈出的寬和高
4.js代碼
<script type="text/javascript">
$(function(){
$.nyroModalSettings({
minWidth: 200, // Minimum width
minHeight: 100, // Minimum height
showBackground: function (elts, settings, callback) {
elts.bg.css({
opacity:0
}).fadeTo(500, 0.6, callback);
}
});
$('#aa').nyroModal({
endShowContent:function(){
$("#content").attr("value","");
}
});
});
</script>
其中minWidth和minHeight為最大和最小寬度、高度， $('#aa').nyroModal({})中aa為超鏈接的id，endShowContent指定函數(shù)為彈出時(shí)要執(zhí)行的操作
主要在兩個(gè)地方使用了這個(gè)效果，第一是創(chuàng)建相冊，第二是圖片查看，類似于QQ空間里照片查看的效果。發(fā)現(xiàn)使用插件真真的可以很快的實(shí)現(xiàn)，效果也是蠻好的。
nyroModal官方網(wǎng)站為：http://nyromodal.nyrodev.com/
強(qiáng)大的 遮罩層， 它包括以下功能：
以ajax遠(yuǎn)程加載內(nèi)容
以ajax加載內(nèi)容
顯示圖片
對話框
iframe
等等……
使用起來非常簡單，可參考：
http://www.cnblogs.com/lynnlin/archive/2011/11/02/2233072.html
http://www.cnblogs.com/ideas/archive/2009/09/04/jquery-nyromodal.html
使用方法：
1.引入jquery.nyroModal-1.6.2.pack.js
2.給nyroModal層添加樣式，如關(guān)閉按鈕，加載等樣式
jQuery彈出層nyroModal的使用
圖片為附件中的對應(yīng)圖片
3.寫頁面內(nèi)容
<body>
<a href="#out" id="aa">彈出</a>
<div id="out" style="display: none; width:200px; height:100px">
彈出層的內(nèi)容:
<input id="content" type="text">
</div>
</body>
其中超鏈接的href中#后面的要對應(yīng)彈出層的id，其中id為out的層，style中的樣式為彈出的寬和高
4.js代碼
<script type="text/javascript">
$(function(){
$.nyroModalSettings({
minWidth: 200, // Minimum width
minHeight: 100, // Minimum height
showBackground: function (elts, settings, callback) {
elts.bg.css({
opacity:0
}).fadeTo(500, 0.6, callback);
}
});
$('#aa').nyroModal({
endShowContent:function(){
$("#content").attr("value","");
}
});
});
</script>
其中minWidth和minHeight為最大和最小寬度、高度， $('#aa').nyroModal({})中aa為超鏈接的id，endShowContent指定函數(shù)為彈出時(shí)要執(zhí)行的操作
鄂公網(wǎng)安備 42090202000212號