仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 3386|回复: 20
打印 上一主题 下一主题

[学习教程] IOS设计挪动端ClipBox效果插件(for Zepto)仓酷云

[复制链接]
莫相离 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-18 11:30:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
NSStringNSArrayNSDictionary等这些工具在所有的框架里都会出现iOS大部分类都是继承自NSObject(我还没见过不是继承自NSObject的..)我该怎样先容它呢?实在它很复杂,没甚么功效。可是既然已做了个插件,想着没准也有人必要如许的完成,就拿出来共享一下吧,实在本人写一个也很复杂。
效果我感到用言语欠好说,以是才给它起了这么个不知云的名字——clipBox。但仍是复杂形貌一下吧,就是在一个框(Box)里能够拖动图片构成一种剪切效果,为的是在小屏幕上检察年夜图片。就像在一个小窗口里扫瞄Google舆图一样。复杂吧?因为工夫的干系我只开放了两个切换图片的接口,即clipBox.prev()和clipBox.next(),挪用时能够传进imgScale参数来缩放图片。实在想一想,假如你必要的话能够把它做的更完美一点,好比开放一个双击缩小/减少的接口。
你能够扫一下上面的二维码来检察最后的效果:

<br>
用法以下:
<scripttype="text/javascript">
$(function(){
varclipBox=$(#clipBox_1).clipBox();
$(.prev).on(click,function(e){
clipBox.prev();
returnfalse;
});
$(.next).on(click,function(e){
clipBox.next();
returnfalse;
});
/*
*你能够在一个页面中多处利用clipBox,
*并纪录下反回的对象以便操纵其供应的接口
*
*varclipbox2=$(#clipBox_2).clipBox();
*varclipbox3=$(#clipBox_3).clipBox();
*/
});
</script>
<divid="clipBox_1">


</div>
<ahref=""class="prev">上一个</a>|<ahref=""class="next">下一个</a>
以下是插件源码,你也能够在Github上检察最新版本:
/*!
zepto.clipBox.js
v1.0
David
http://www.CodingSerf.com
插件公然两个办法用于切换图片(下例):
varclipBox=$(.clipBox).clipBox({imgScale:0.8});//图片缩放0.8显现
$(.prev).on(click,function(e){
clipBox.prev();//前一张
returnfalse;//多是a标签,注重前往false
});
$(.next).on(click,function(e){
clipBox.next();//后一张
returnfalse;//多是a标签,注重前往false
});
*/
;(function($){
$.fn.clipBox=function(option){
varopts=$.extend({},$.fn.clipBox.defaults,option),//设置选项
$this=this,
clipBoxStylePosition=$this.CSS(position),
boxWidth=$this.width(),
boxHeight=$this.height(),
$imgs=this.find(img),//.css({width:opts.imgScale*100+%,height:auto}),
imgsLength=$imgs.length,
imgsInfo=[],
currIndex=0,
top_z_index=100,
startX=0,
startY=0;
//初始化
$this.css({overflow:hidden});
clipBoxStylePosition==absolute||clipBoxStylePosition==fixed||($this.css({position:relative}));
for(vari=0,$img,imgW,imgH,wGap,hGap,initX,initY;i<imgsLength;i++){
$img=$imgs.eq(i);
imgW=$img.width()*opts.imgScale;
imgH=$img.height()*opts.imgScale;
wGap=boxWidth-imgW;
hGap=boxHeight-imgH;
initX=wGap/2;
initY=hGap/2;
imgsInfo={};
imgsInfo.initPosition={x:initX,y:initY};
imgsInfo.currPosition={x:initX,y:initY};
imgsInfo.bounce={x0:0,y0:0,x1:wGap,y1:hGap};
$img.css({
position:absolute,
left:initX,
top:initY,
width:imgW,
height:imgH,
}).hide();
};
$imgs.eq(0).css({z-index:top_z_index}).show();
//注册事务
$this.on(touchstart,function(e){
vartouch=e.touches[0];
startX=touch.clientX;
startY=touch.clientY;
e.stopImmediatePropagation();//制止页面在clipBox地区触发转动
}).on(touchmove,function(e){
var$currImg=$imgs.eq(currIndex),
imgInfo=imgsInfo[currIndex],
touch=e.touches[0],
moveX=touch.clientX,
moveY=touch.clientY,
targetX=moveX-startX+imgInfo.currPosition.x,
targetY=moveY-startY+imgInfo.currPosition.y,
isOutOfBounceX=targetX<=imgInfo.bounce.x1||targetX>=imgInfo.bounce.x0,
isOutOfBounceY=targetY<=imgInfo.bounce.y1||targetY>=imgInfo.bounce.y0;
isOutOfBounceX&&(targetX=imgInfo.currPosition.x);
isOutOfBounceY&&(targetY=imgInfo.currPosition.y);
startX=moveX;
startY=moveY;
$currImg.css({left:targetX,top:targetY});
imgInfo.currPosition={x:targetX,y:targetY};
e.stopImmediatePropagation();//制止页面在clipBox地区触发转动
}).on(touchend,function(e){
e.stopImmediatePropagation();//制止页面在clipBox地区触发转动
});
//切换图片
functionswitchImg(flag){
varswitchIndex=currIndex+flag,
imgInfo,
initPosition;
switchIndex<0&&(switchIndex=imgsLength-1);
switchIndex>imgsLength-1&&(switchIndex=0);
imgInfo=imgsInfo[switchIndex];
initPosition=imgInfo.initPosition;
imgInfo.currPosition={x:initPosition.x,y:initPosition.y},
$imgs.eq(switchIndex).css({z-index:top_z_index,left:initPosition.x,top:initPosition.y}).show();
$imgs.eq(currIndex).css({z-index:}).hide();
currIndex=switchIndex;
};
//链式前往
this.prev=function(){
switchImg(-1);
};
this.next=function(){
switchImg(+1);
};
returnthis;
};
$.fn.clipBox.defaults={
imgScale:1//图片缩放比例0.0~1.0,图片会按实践尺寸缩放,而不是参考父层div
};
})(Zepto);
好了,就是如许。

不管是学习Objective-C语言,还是学习ios,我都只是跟着书上的例子,在苹果机上,在Xcode和InterfaceBuilder开发环境中,按部就班的“抄”些应用程序。
沙发
发表于 2015-1-19 06:53:03 | 只看该作者
我也从简单的状态栏适配开始,先研究了下关于状态栏的适配,特总结如下,供广大网友一起讨论交流。
灵魂腐蚀 该用户已被删除
板凳
发表于 2015-1-21 17:01:33 | 只看该作者
以上可以同时进行,学习过程中尽量不要纠结细节和底层,要知道ios是封闭的、OC是高级语言,我们不可能过多地去了解它的原理,至少在新手阶段没有必要。用迭代的方式更新你的知识,而不是死抠一个知识点。
小女巫 该用户已被删除
地板
发表于 2015-1-30 21:28:41 | 只看该作者
以上可以同时进行,学习过程中尽量不要纠结细节和底层,要知道ios是封闭的、OC是高级语言,我们不可能过多地去了解它的原理,至少在新手阶段没有必要。用迭代的方式更新你的知识,而不是死抠一个知识点。
精灵巫婆 该用户已被删除
5#
发表于 2015-2-6 16:02:44 | 只看该作者
在百度搜索你想要了解的类名(苹果的cocoa和cocoatouch框架的类名很有特点很容易搜到,前缀都是NS or UI),看别人写的博客详解
深爱那片海 该用户已被删除
6#
发表于 2015-2-10 08:19:17 | 只看该作者
边吃零食边看Stanford的视频教程
分手快乐 该用户已被删除
7#
发表于 2015-3-1 04:26:08 | 只看该作者
才在自己的Windows电脑上安装配置成功了一个完美的Mac OS X Lion(10.7.4)系统,而且下载了Xcode4.5的最新版本。虽然不能实机调试,但是作为iOS开发学习已经非常完美了。
小妖女 该用户已被删除
8#
发表于 2015-3-7 08:00:52 | 只看该作者
同很多iOS开发者一样,我也是通过培训进入到iOS开发这个行业,开始没有打算培训,只准备自己学习一些计算机编程相关的知识,毕业时找一份编程相关工作(本人是信息与计算科学这个专业,是数学系)。
透明 该用户已被删除
9#
发表于 2015-3-10 13:05:39 | 只看该作者
边吃零食边看Stanford的视频教程
兰色精灵 该用户已被删除
10#
发表于 2015-3-10 17:52:37 | 只看该作者
边吃零食边看Stanford的视频教程
飘灵儿 该用户已被删除
11#
发表于 2015-3-12 04:53:44 | 只看该作者
自从苹果公司开放iOS SDK以来,大量的国内外的软件开发者将关注的目光聚集在苹果的iOS平台上。由于iPhone和iPad自一出现就给人带来了颠覆性的感觉
第二个灵魂 该用户已被删除
12#
发表于 2015-3-13 04:10:38 | 只看该作者
这个办法就是在WindowsXP或Win7的电脑上,使用vmware虚拟机来搭建一个真实的Mac OS X环境。
小魔女 该用户已被删除
13#
发表于 2015-3-16 23:21:30 | 只看该作者
iPhone文件系统NSFileManager讲解是本文要介绍的内容,主要是通过iphone文件系统来学习NSFileManager的使用方法,具体内容来看本文详解。
只想知道 该用户已被删除
14#
发表于 2015-3-19 18:13:55 | 只看该作者
在百度搜索你想要了解的类名(苹果的cocoa和cocoatouch框架的类名很有特点很容易搜到,前缀都是NS or UI),看别人写的博客详解
爱飞 该用户已被删除
15#
发表于 2015-3-22 01:09:02 | 只看该作者
其次学习方法和学习心态很重要,在学习当中应该保持一颗良好的心态。应该借鉴别人好的学习方法,大家互相帮助,取长补短。
莫相离 该用户已被删除
16#
 楼主| 发表于 2015-3-27 00:48:18 | 只看该作者
其次学习方法和学习心态很重要,在学习当中应该保持一颗良好的心态。应该借鉴别人好的学习方法,大家互相帮助,取长补短。
再现理想 该用户已被删除
17#
发表于 2015-3-27 08:58:33 | 只看该作者
其实在培训的过程中,学习到最多的就是查资料的方式,当时感觉老师好坑,什么都不告诉我们,让我们自己去查,但是现在觉得还是要自己解决问题,这样才能理解的更加深入。
冷月葬花魂 该用户已被删除
18#
发表于 2015-4-3 23:30:23 | 只看该作者
边吃零食边看Stanford的视频教程
飘飘悠悠 该用户已被删除
19#
发表于 2015-4-6 15:52:06 | 只看该作者
到大三时,学院与我去培训的机构成立了实习基地,并让我们寒假去实习了一段时间,感觉还不错,于是在大四的时候去培训了
不帅 该用户已被删除
20#
发表于 2015-4-6 17:03:10 | 只看该作者
边吃零食边看Stanford的视频教程
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-29 16:38

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表