作者：skyli 发布于：2012-3-27 15:56 Tuesday
评论(217)
引用(0)
浏览(2842)
作者：skyli 发布于：2012-5-8 13:52 Tuesday
Fancybox的特点如下：
- 可以支持图片、html文本、flash动画、iframe以及ajax的支持
- 可以自定义播放器的CSS样式
- 可以以组的形式进行播放
- 如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
- Fancybox播放器支持投影，更有立体的感觉
使用方法：
1、引入jquery核心库和Fancybox插件库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
可选 - 如果需要用到fancy transition（一些动画效果）你还需要引入以下脚本
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
2、添加样式表文件
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="imagetoolbar" content="no"/> <title>FancyBox 1.3.1 | Demonstration</title> <script type="text/javascript" src="js/jquery-1.4.min.js"></script> <!--调用jquery核心库-----> <script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script><!--调用可用鼠标控制的库--> <script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="js/pngobject.js"></script> <!--correctly handle PNG transparency in Win IE 5.5 & 6.--> <link rel="stylesheet" href="style/style.css" type="text/css"/> <link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
/**
运行的代码
*/ $("a[rel=example_group]").fancybox({
'transitionIn' : 'fade', //设置动画效果. 可以设置为 'elastic', 'fade' 或 'none' 'transitionOut' : 'fade', //同上 'titlePosition' : 'over', //设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over' 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { //可以自定义标题的格式 return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
<!-------------------------------------以下属于测试代码，不在此例子效果实现的代码内------------------------------------>
/* * 单独设置每个图片或文件的效果
*/ $("a#example1").fancybox({
'titleShow' : true //是否显示标题 });
$("a#example2").fancybox({
'titleShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'titleShow' : true,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox();
$("a#example5").fancybox({
'titlePosition' : 'outside'
});
$("a#example6").fancybox({
'titlePosition' : 'outside'
});
/* * 设置id号为various效果
*/ $("#various1").fancybox({
'titlePosition' : 'over',//标题显示的位置 'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false, //如果为true，fancybox可以自适应浏览器窗口大小 'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head> <body> <div id="content"> <h4>jQuery FancyBox 实现点击小图显示大图</h4> <p> <a rel="example_group" href="example/4_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/4_s.jpg"/></a> <a rel="example_group" href="example/5_b.jpg" title=""><img alt="" src="example/5_s.jpg"/></a> <a rel="example_group" href="example/6_b.jpg" title=""><img alt="" src="example/6_s.jpg"/></a> </p> <p> <a rel="example_group" href="example/7_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/7_s.jpg"/></a> <a rel="example_group" href="example/8_b.jpg" title=""><img alt="" src="example/8_s.jpg"/></a> <a rel="example_group" href="example/9_b.jpg" title=""><img alt="" src="example/9_s.jpg"/></a> </p> </div> <div><p> </p></div> </body> </html>
Fancybox的API和配置选项说明
| 属性名 |
默认值 |
简要说明 |
|---|
| padding |
10 |
浏览框内边距，和css中的padding一个意思 |
| margin |
20 |
浏览框外边距，和css中的margin一个意思 |
| opacity |
false |
如果为true，则fancybox在动画改变的时候透明度可以跟着改变 |
| modal |
false |
如果为true，则'overlayShow' 会被设成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false' |
| cyclic |
false |
如果为true，相册会循环播放 |
| scrolling |
'auto' |
设置overflow的值来创建或隐藏滚动条，可以设置成 'auto', 'yes', or 'no' |
| width |
560 |
设置iframe和swf的宽度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的宽度 |
| height |
340 |
设置iframe和swf的高度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的高度 |
| autoScale |
true |
如果为true，fancybox可以自适应浏览器窗口大小 |
| autoDimensions |
true |
在内联文本和ajax中，设置是否动态调整元素的尺寸，如果为true，请确保你已经为元素设置了尺寸大小 |
| centerOnScroll |
false |
如果为true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心 |
| ajax |
{ } |
和jquery的ajax调用选项一样
注意: 'error' and 'success' 这两个回调事件会被fancybox重写 |
| swf |
{wmode: 'transparent'} |
swf的设置选项 |
| hideOnOverlayClick |
true |
如果为true则点击遮罩层关闭fancybox |
| hideOnContentClick |
false |
如果为true则点击播放内容关闭fancybox |
| overlayShow |
true |
如果为true，则显示遮罩层 |
| overlayOpacity |
0.3 |
遮罩层的透明度（范围0-1） |
| overlayColor |
'#666' |
遮罩层的背景颜色 |
| titleShow |
true |
如果为true，则显示标题 |
| titlePosition |
'outside' |
设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over' |
| titleFormat |
null |
可以自定义标题的格式 |
| transitionIn, transitionOut |
'fade' |
设置动画效果. 可以设置为 'elastic', 'fade' 或 'none' |
| speedIn, speedOut |
300 |
fade 和 elastic 动画切换的时间间隔, 以毫秒为单位 |
| changeSpeed |
300 |
切换时fancybox尺寸的变化时间间隔（即变化的速度），以毫秒为单位 |
| changeFade |
'fast' |
切换时内容淡入淡出的时间间隔（即变化的速度） |
| easingIn, easingOut |
'swing' |
为 elastic 动画使用 Easing |
| showCloseButton |
true |
如果为true，则显示关闭按钮 |
| showNavArrows |
true |
如果为true，则显示上一张下一张导航箭头 |
| enableEscapeButton |
true |
如果为true，则启用ESC来关闭fancybox |
| onStart |
null |
回调函数，加载内容是触发 |
| onCancel |
null |
回调函数，取消加载内容后触发 |
| onComplete |
null |
回调函数，加载内容完成后触发 |
| onCleanup |
null |
回调函数，关闭fancybox前触发 |
| onClosed |
null |
回调函数，关闭fancybox后触发 |
清晨の雨露:One step one footprint
评论(70)
引用(0)
浏览(214)
作者：skyli 发布于：2012-5-8 13:31 Tuesday
近来瀑流式布局越来越普遍，实现瀑流式布局的插件也越来越多。
例如淘宝的
KISSY。
不过对我我这种半吊子来说，要熟练的使用KISSY没那么快。
最近在一个项目中
hery推荐了一个Masonry插件，
使用起来很简单，插件大小只有6k。简单介绍下。
一般的瀑流式布局，如果有4列的话，很多人会采用一下这种写法:
<div id="main">
<div class="Column">
<div class="list"></div>
<div class="list"></div>
</div>
<div class="Column">
<div class="list"></div>
<div class="list"></div>
</div>
<div class="Column">
<div class="list"></div>
<div class="list"></div>
</div>
<div class="Column">
<div class="list"></div>
<div class="list"></div>
</div>
</div>也就是4列等宽在浮动。因为瀑流式一般每个块的高度都是不固定的，
所以没有办法通过每个块的浮动来实现。
使用插件Masonry就能够解决这个问题。同样的样式用Masonry插件就可以这样写：
<div id="main">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>简单了许多，插件的原理是通过绝对定位实现的，也就解决了高度不一产生的浮动问题。
这样的写法。后台数据的输出也会更加容易一些。
Masonry的使用方法如下：
引入文件：
在js中调用插件：
<script type="text/javascript">
$(function(){
$(´#main´).masonry({
// options 设置选项
itemSelector : ´.list´,//class 选择器
columnWidth : 240 ,//一列的宽度 Integer
isAnimated:true,//使用jquery的布局变化 Boolean
animationOptions:{
//jquery animate属性 渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的间隙 Integer
isFitWidth:true,// 适应宽度 Boolean
isResizableL:true,// 是否可调整大小 Boolean
isRTL:false,//使用从右到左的布局 Boolean
});
});
</script>如果有图片的话，调用如下：
<script>
var $main= $(´#main´);
$main.imagesLoaded(function(){
$main.masonry({
itemSelector : ´.list´,
columnWidth : 240
});
});
</script>
demo:http://cll.socss.cn/wp-content/uploads/2012/02/Masonry/Masonry.html
下载地址：http://cll.socss.cn/wp-content/uploads/2012/02/Masonry.zip
评论(1)
引用(0)
浏览(14)
作者：skyli 发布于：2012-5-8 13:30 Tuesday
最近在做一个仿pinterest的瀑布流的功能，很是好看，查了好多资料，发现jQuery Masonry的插件可以快速的实现这一功能，所以总结一下
Masonry的方法。
html代码：
<style type="text/css">
.list { width:1000px; margin:0 auto; list-style:none; }
.list li { display:inline; margin:0 10px 20px 0; padding:6px; border:1px #DDD solid; }
</style>
<ul class="list">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/6.jpg" alt="" /></li>
<li><img src="images/7.jpg" alt="" /></li>
</ul>
js代码：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script>
$(function(){
$('.list').masonry({
itemSelector: '.list li'
});
});
</script>
这是一个瀑布流的简单实例。
下面来讲一下masonry的一些详细的参数和用法。
引入jquery.masonry.min.js后，实例化masonry（）方法
$('#wrapper').masonry({
singleMode: false, // 禁用测量每个浮动元素的宽度。如果浮动元素具有相同的宽度，设置为true。 默认： false
| columnWidth: 240, // 1列网格的宽度，单位为像素（px）。 默认： 第一个浮动元素外宽度。 |
itemSelector: '.box:visible', // 附加选择器，用来指定哪些元素包裹的元素会重新排列。
resizeable: true,// 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认：true
animate: true,// 布局重排动画。默认：false
animationOptions: {},// 一对动画选项，具体参数可以参考jquery .animate()中的options选项，见：http://www.css88.com/jqapi/#p=animate
appendedContent: $('.new_content'),//附加选择器元素，用来尾部追加内容。在集成infinitescroll插件的情况下使用。
saveOptions: true,// 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项, 默认：true
function() {} // 可选择的回调函数,'this'将指向重排的Masonry适用元素
});
评论(1)
引用(0)
浏览(25)
作者：skyli 发布于：2012-5-8 13:28 Tuesday
首先在页面中引入
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.js"></script>
排列body中的内容:
<BODY>
<div id="container">
<div class="item">a a a a a a</div>
<div class="item">a a a a a a</div>
<div class="item">a a a a a a</div>
<div class="item">a a a a a a</div>
</div>
</BODY> 在js中调用插件：
<script type="text/javascript">
$(function(){ $('#container').masonry({ // options 设置选项
itemSelector : '.item',//class 选择器
columnWidth : 240 ,//一列的宽度 Integer
isAnimated:true,//使用jquery的布局变化 Boolean
animationOptions:{
//jquery animate属性 渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的间隙 Integer
isFitWidth:true,// 适应宽度 Boolean
isResizableL:true,// 是否可调整大小 Boolean
isRTL:false,//使用从右到左的布局 Boolean
});
});
</script> 当需要排列图片div时：需要调用：
<script>
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 240 });
});
</script>
调用masonry插件的方法格式是：
$('#container').masonry( 'methodName', [optionalParameters] ) 例如：
.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布局
.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态
.masonry( 'layout', $items, callback )// 指定项目的布局
.masonry( 'option', options ) //设置option
.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序
.masonry( 'reload' ) //用于预先考虑或者插入项目
.masonry( 'reloadItems' )的简化版
.masonry( 'remove', $items ) //从masonry实例或dom中移除项目
调用infinitescroll插件：
$container.infinitescroll({
navSelector : '#page-nav', //分页导航的选择器
nextSelector : '#page-nav a', //下页连接的选择器
itemSelector : '.box', //你要检索的所有项目的选择器
loading: {
finishedMsg: 'No more pages to load.',//结束显示信息
img: 'http://i.imgur.com/6RMhx.gif'//loading图片
}},
//作为回调函数触发masonry
function( newElements ) {
// 当加载时隐藏所有新项目
var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry布局之前保证图片载入
$newElems.imagesLoaded(function(){
// 现在可以显示所有的元素了
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}); 附件：http://115.com/file/bhrlpaj6#
jquery-1.7.1.min.rar
http://115.com/file/aq59s22l#
jquery.masonry.min.rar
http://115.com/file/dnolqagh#
jquery.infinitescroll.rar
如附件失效—->官方网址在此：（插件官网http://masonry.desandro.com/index.html）
评论(1)
引用(0)
浏览(20)
作者：skyli 发布于：2012-5-7 18:06 Monday
关于REST的介绍可以参考我之前的文章，总体说来，REST是web发展的趋势，而PHP是web开发的利器，但我找了一遍，只找到了两个PHP REST框架(不包括那些以MVC为核心，同时又支持REST的框架)，一个是Tonic，架构理念我比较认同，但代码质量实在不敢恭维。还有一个是Recess，在我看来，它有点复杂化了，把不该rest做的事也做了。在这种情况下，我只能自己动手，丰衣足食了。
详情请点击：http://blog.leezhong.com/project/2010/12/04/resty.html
评论(1)
引用(0)
浏览(15)
作者：skyli 发布于：2012-4-26 23:11 Thursday
搭配网打造专业服装搭配第一社区，提高中国网友服装色彩搭配技能,分享服装搭配技巧。
组合服装搭配做时尚编辑，咨询顾问解决服装搭配疑问,学习服装搭配技巧。汇集商家折
扣衣服款式,服装品牌,轻松购物，参与搭配竞赛赢奖品。学搭配，秀搭配，帅哥靓女尽情
搭配，彰显个性时尚。专注女性服饰、美容美体、护肤彩妆、全面打造融专业性、实用性、
互动性为一体的中高端人群品质生活交流平台。
评论(3)
引用(0)
浏览(44)
作者：skyli 发布于：2012-4-11 13:51 Wednesday
如果你想在自己的应用中使用摄像头，需要在AndroidManifest.xml中增加以下代码：
<uses-permissionandroid:name="android.permission.CAMERA"/>
设定摄像头布局
这是开发工作的基础，也就是说我们希望在应用程序中增加多少辅助性元素，如摄像头各种功能按钮等。在本文中我们采取最简方式，除了拍照外，没有多余摄像头功能。下面我们一起看一下本文示例将要用到的布局文件“camera_surface.xml”。
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"android:layout_height="fill_parent"
androidrientation="vertical">
<SurfaceViewandroid:id="@+id/surface_camera"
android:layout_width="fill_parent"android:layout_height="10dip"
android:layout_weight="1">
</SurfaceView>
</LinearLayout>
小提示：记住不要在资源文件名称中使用大写字母，如果你把该文件命名为“CameraSurface.xml”，会给你带来不必要的麻烦。
该布局非常简单，只有一个LinearLayout视图组，在它下面只有一个SurfaceView视图，也就是我们的摄像头屏幕。
摄像头实现代码
现在我们已经查看了摄像头的xml代码，下面再来看一下Android代码。让我们创建一个名为“CameraView”的Activity类，实现SurfaceHolder.Callback接口：
publicclassCamaraViewextendsActivityimplementsSurfaceHolder.Callback
接口SurfaceHolder.Callback被用来接收摄像头预览界面变化的信息。它实现了三个方法：
surfaceChanged
当预览界面的格式和大小发生改变时，该方法被调用。
surfaceCreated
初次实例化，预览界面被创建时，该方法被调用。
surfaceDestroyed
当预览界面被关闭时，该方法被调用。
下面我们一起看一下在摄像头应用中如何使用这个接口，首先看一下在Activity类中的onCreate方法。
super.onCreate(icicle);
getWindow().setFormat(PixelFormat.TRANSLUCENT);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.camera);
mSurfaceView=(SurfaceView)findViewById(R.id.surface_camera);
mSurfaceHolder=mSurfaceView.getHolder();
mSurfaceHolder.addCallback(this);
mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
}
下面我们逐一对代码进行一下说明。
getWindow().setFormat(PixelFormat.TRANSLUCENT);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
通过上述代码，我们告诉屏幕两点信息：
1、摄像头预览界面将通过全屏显示，没有“标题(title)”;
2、屏幕格式为“半透明”。
setContentView(R.layout.camera_surface);
mSurfaceView=(SurfaceView)findViewById(R.id.surface_camera);
在以上代码中，我们通过setContentView来设定Activity的布局为前面我们创建的camera_surface，并创建一个SurfaceView对象，从xml文件中获得它。
mSurfaceHolder=mSurfaceView.getHolder();
mSurfaceHolder.addCallback(this);
mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
通过以上代码，我们从surfaceview中获得了holder，并增加callback功能到“this”。这意味着我们的操作(activity)将可以管理这个surfaceview。
我们看一下callback功能时如何实现的：
publicvoidsurfaceCreated(SurfaceHolderholder){
mCamera=Camera.open();
mCamera是“Camera”类的一个对象。在surfaceCreated方法中我们“打开”摄像头。这就是启动它的方式。
publicvoidsurfaceChanged(SurfaceHolderholder,intformat,intw,inth){
if(mPreviewRunning){
mCamera.stopPreview();
}
Camera.Parametersp=mCamera.getParameters();
p.setPreviewSize(w,h);
mCamera.setParameters(p);
try{
mCamera.setPreviewDisplay(holder);
}catch(IOExceptione){
e.printStackTrace();
}
mCamera.startPreview();
mPreviewRunning=true;
}
该方法让摄像头做好拍照准备，设定它的参数，并开始在Android屏幕中启动预览画面。我使用了一个“semaphore”参数来防止冲突：当mPreviewRunning为true时，意味着摄像头处于激活状态，并未被关闭，因此我们可以使用它。
publicvoidsurfaceDestroyed(SurfaceHolderholder){
mCamera.stopPreview();
mPreviewRunning=false;
mCamera.release();
}
通过这个方法，我们停止摄像头，并释放相关的资源。正如大家所看到的，我们在这儿设置mPreviewRunning为false，以此来防止在
surfaceChanged方法中的冲突。原因何在?因为这意味着我们已经关闭了摄像头，而且我们不能再设置其参数或在摄像头中启动图像预览。
最后我们看一下本例中最重要的方法：
Camera.PictureCallbackmPictureCallback=newCamera.PictureCallback(){
publicvoidonPictureTaken(byte[]imageData,Camerac){
}
};
当拍照时，该方法被调用。举例来说，你可以在界面上创建一个OnClickListener，当你点击屏幕时，调用PictureCallBack方
法。这个方法会向你提供图像的字节数组，然后你可以使用Android提供的Bitmap和BitmapFactory类，将其从字节数组转换成你想要的
图像格式。
评论(4)
引用(0)
浏览(82)
作者：skyli 发布于：2012-4-10 23:08 Tuesday
分类：
评论(5)
引用(0)
浏览(47)
作者：skyli 发布于：2012-4-10 23:08 Tuesday
分类：
评论(4)
引用(0)
浏览(38)
