|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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开发环境中,按部就班的“抄”些应用程序。 |
|