/* * myFocus JavaScript Library v2.0.1 * Open source under the BSD & GPL License * * Copyright 2012, Koen Lee * http://cosmissy.com/ * * Date: 2012/05/26 */ (function(){ //DOM基础操作函数 var $id=function(id){ return typeof id==='string'?document.getElementById(id):id; }, $tag=function(tag,parentNode){ return ($id(parentNode)||document).getElementsByTagName(tag); }, $tag_=function(tag,parentNode){ return $getChild(tag,parentNode,'tag'); }, $class=function(className,parentNode){ var doms=$tag('*',parentNode),arr=[]; for(var i=0,l=doms.length;i'://children isChild=true; break; case '.'://class var cls=s.slice(1); var fn=isChild?$class_:$class; $(parent).each(function(){ dom=dom.concat(fn(cls,this)); }); isChild=false; break; case '#'://id var id=s.slice(1),e=$id(id); if(e) dom.push($id(id)); isChild=false; break; default://tag(支持'tag.class'寻找,不支持也不建议用'tag#id'寻找,请用'#id') var fn=isChild?$tag_:$tag,sArr=s.split('.'); var tag=sArr[0],cls=sArr[1]; $(parent).each(function(){ var arr=fn(tag,this); for(var i=0,len=arr.length;i+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g; var parts=[],m; while((m = chunker.exec(selector)) !== null ) { parts.push( m[1] );//存储匹配的字符串信息 } return parts; }, wrap:function(html){//每次只wrap一个元素,多个请用each var o=this[0],e=document.createElement('div'); e.innerHTML=html; var wrap=e.firstChild; o.parentNode.replaceChild(wrap,o); wrap.appendChild(o); return this; }, addHtml:function(html){ var parent=this[0]; var e=document.createElement('div'); e.innerHTML=html; var dom=e.childNodes[0]; parent.appendChild(dom); return myFocus(dom); }, addList:function(className,type){ var li=this.HTMLUList,n=this.HTMLUListLength; var strArr=['
']; for(var i=0;i';break;//b标签主要是为了做透明背景,下同 case 'txt' :html=img?li[i].innerHTML.replace(/\/i,img.alt)+'

'+img.getAttribute("text")+'

':'';break; case 'thumb':html=img?'':'';break; default :html=''; } strArr.push('
  • '+html+'
  • '); } strArr.push('
    '); return this.addHtml(strArr.join('')); }, addListNum:function(className){ return this.addList(className||'num','num');//默认class=num }, addListTxt:function(className){ return this.addList(className||'txt','txt');//默认class=txt }, addListThumb:function(className){ return this.addList(className||'thumb','thumb');//默认class=thumb }, remove:function(){ var o=this[0]; if(o) o.parentNode.removeChild(o); }, repeat:function(n){ var n=n||2,pNode=this[0].parentNode,html=pNode.innerHTML,s=[]; for(var i=0;i({height:'300px'}),可以不带单位px for(var p in css){ if(typeof css[p]==='number'&&!this.cssNumber[p]) css[p]+='px'; arr.push(p.replace(/([A-Z])/g,'-$1')+':'+css[p]+';'); if(p==='opacity') arr.push('filter:alpha(opacity='+css[p]*100+')'); } o.style.cssText+=arr.join(''); return this; } }, setOpacity:function(value){//仅用于animate要求高效的核心算法中,其它情况可用css()代替 this[0].style.opacity=value,this[0].style.filter='alpha(opacity='+value*100+')'; }, setAnimateStyle:function(value,prop,m){//仅用于animate要求高效的核心算法中,其它情况可用css()代替 this[0].style[prop]=Math[m](value)+'px'; }, addClass:function(className){ this[0].className+=' '+className; return this; }, removeClass:function(className){ var o=this[0],cls=className&&o.className,reg="/\\s*\\b"+className+"\\b/g"; o.className=cls?cls.replace(eval(reg),''):''; return this; }, cssNumber:{fillOpacity:true,fontWeight:true,lineHeight:true,opacity:true,orphans:true,widows:true,zIndex:true,zoom:true}//不加px的css,参考jQuery }); myFocus.fn.extend({//Animate animate:function(attr,value,time,type,funcBefore,funcAfter){//value支持相对增值'+=100',相对减值'-=100'形式 var $o=this,o=$o[0],isOpacity=attr==='opacity',diffValue=false; funcBefore&&funcBefore.call(o); if(typeof value==='string'){ if(/^[+-]=\d+/.test(value)) value=value.replace('=',''),diffValue=true; value=parseFloat(value); } var oriVal=$o.css(attr),//原始属性值 b=isNaN(oriVal)?0:oriVal,//开始值,无值时为0 c=diffValue?value:value-b,//差值 d=time,//总运行时间 e=this.easing[type],//缓动类型 m=c>0?'ceil':'floor',//取最大绝对值 timerId='__myFocusTimer__'+attr,//计数器id setProperty=$o[isOpacity?'setOpacity':'setAnimateStyle'],//属性设置方法 origTime=(new Date)*1;//原始时间值 o[timerId]&&clearInterval(o[timerId]); o[timerId]=setInterval(function(){ var t=(new Date)-origTime;//已运行时间 if(t<=d){ setProperty.call($o,e(t,b,c,d),attr,m); }else{ setProperty.call($o,b+c,attr,m);//设置最终值 clearInterval(o[timerId]),o[timerId]=null; funcAfter&&funcAfter.call(o); } },13); return this; }, fadeIn:function(time,type,fn){ if(typeof time!=='number') fn=time,time=400;//默认400毫秒 if(typeof type==='function') fn=type,type=''; this.animate('opacity',1,time,type||'linear',function(){ myFocus(this).css({display:'block',opacity:0}); },fn); return this; }, fadeOut:function(time,type,fn){ if(typeof time!=='number') fn=time,time=400;//默认400毫秒 if(typeof type==='function') fn=type,type=''; this.animate('opacity',0,time,type||'linear',null,function(){ this.style.display='none'; fn&&fn.call(this); }); return this; }, slide:function(params,time,type,fn){ if(typeof time!=='number') fn=time,time=800;//默认800毫秒 if(typeof type==='function') fn=type,type=''; for(var p in params) this.animate(p,params[p],time,type||'easeOut',null,fn); return this; }, stop:function(){//停止所有运动 var o=this[0]; for(var p in o) if(p.indexOf('__myFocusTimer__')!==-1) o[p]&&clearInterval(o[p]); return this; }, easing:{ linear:function(t,b,c,d){return c*t/d + b;}, swing:function(t,b,c,d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;}, easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;}, easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;}, easeInOut:function(t,b,c,d){return ((t/=d/2) < 1)?(c/2*t*t*t*t + b):(-c/2*((t-=2)*t*t*t - 2) + b);} } }); myFocus.fn.extend({//Method(fn) bind:function(type,fn){ myFocus.addEvent(this[0],type,fn); return this; }, play:function(funcLastFrame,funcCurrentFrame,seamless){ var this_=this,p=this_.settings,n=this_.HTMLUListLength,t=p.time*1000,seamless=seamless||false,//是否无缝 float=myFocus(this_.HTMLUList).css('float'),isLevel=float==='left',//仅支持'left'方向和'top'方向 direction=isLevel?'left':'top',distance=isLevel?p.width:p.height,//运动距离 indexLast=0,indexCurrent=p.index;//帧索引值,默认0 this_.find('.loading').remove();//删除loading... this_.run=function(value){//循环运动函数,支持+-=value funcLastFrame&&funcLastFrame(indexLast,n);//运行前一帧 indexCurrent=typeof value==='string'?indexLast+parseInt(value.replace('=','')):value;//fixed index if(indexCurrent<=-1){//prev run indexCurrent=n-1;//转到最后一帧 if(seamless) this_.HTMLUList[0].parentNode.style[direction]=-n*distance+'px';//无缝的UL定位 } if(indexCurrent>=n){//next run if(!seamless) indexCurrent=0;//非无缝时转到第一帧 if(indexCurrent>=2*n){//无缝 this_.HTMLUList[0].parentNode.style[direction]=-(n-1)*distance+'px';//无缝的UL定位 indexCurrent=n; } } if(seamless&&indexLast>=n&&indexCurrent=this.showEnd){//next this.showEnd=i0?i-1:0; this.showEnd=this.showStart+this.showNum-1; } css[dir]=-this.showStart*this.distance; $ul.slide(css,time||500,'easeOut'); return this; } }); myFocus.extend({//Init set:function(p,callback){ var F=this,id=p.id,oStyle=F.initBaseCSS(id); p.pattern=p.pattern||F.defConfig.pattern; p.__clsName=p.pattern+'_'+id; F.addEvent(window,'load',function(){F.onloadWindow=true}); F.loadPattern(p,function(){ p=F.extend({},F.defConfig,F.config[p.pattern],p);//收集完整参数 F.getBoxReady(p,function(){ var $o=F($id(id)); p.width=p.width||$o.css('width'),p.height=p.height||$o.css('height');//获得box高/宽 F.initCSS(p,$o,oStyle);//css F.initHTML($o);//html $o.addClass(p.pattern+' '+p.__clsName);//+className F.getIMGReady(p,function(){ F.pattern[p.pattern](p,F);//运行pattern代码 callback&&callback(); }); }); }); }, onloadWindow:false, loadPattern:function(p,callback){ if(this.pattern[p.pattern]){callback();return;}//如果已加载pattern var path=this.getFilePath()+'mf-pattern/'+p.pattern; var js= document.createElement("script"),css=document.createElement("link"),src=path+'.js',href="qbui "'.css'; js.type = "text/javascript",js.src=src; css.rel = "stylesheet",css.href="isfg;" var head=$tag('head')[0],isSuccess=0,timeout=3000;//超时3秒 head.appendChild(css); head.appendChild(js); js.onload=js.onreadystatechange=function(){ if(!js.readyState||js.readyState=="loaded"||js.readyState=="complete") callback(),isSuccess=1; }; setTimeout(function(){ //if(!isSuccess) alert('Failed to load: '+src); },timeout); }, getFilePath:function(){ var path=''; var scripts=$tag("script"); for(var i=0,len=scripts.length;i'); css.push('.'+p.__clsName+' *{margin:0;padding:0;border:0;list-style:none;}.'+p.__clsName+'{position:relative;width:'+w+'px;height:'+h+'px;overflow:hidden;font:12px/1.5 Verdana;text-align:left;background:#fff;visibility:visible!important;}.'+p.__clsName+' .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:'+0.26*h+'px;background:#fff;}.'+p.__clsName+' .pic{position:relative;width:'+w+'px;height:'+h+'px;overflow:hidden;}.'+p.__clsName+' .txt li{width:'+w+'px;height:'+p.txtHeight+'px!important;overflow:hidden;}'); //if(p.autoZoom) css.push('.'+p.__clsName+' .pic li{text-align:center;width:'+w+'px;height:'+h+'px;}');//缩放图片居中 try{oStyle.styleSheet.cssText=css.join('')}catch(e){oStyle.innerHTML=css.join('')} }, initBaseCSS:function(id){ var s='#'+id+' *{display:none}',oStyle=document.createElement('style'); oStyle.type='text/css'; try{oStyle.styleSheet.cssText=s}catch(e){oStyle.innerHTML=s} var oHead = $tag('head',document)[0]; oHead.insertBefore(oStyle,oHead.firstChild); return oStyle; }, initHTML:function($o){ var $load=$o.find('.loading'),$img=$load.find('img'),img=$img[0]; if($img.length){ $load.addHtml('

    '+img.alt+'

    '); if(!img.getAttribute('src')) img.style.display='none'; } } }); myFocus.extend({//Method(myFocus) isIE:!!(document.all&&navigator.userAgent.indexOf('Opera')===-1),//!(+[1,]) BUG IN IE9+? addEvent:function(o,type,fn){ var ie=this.isIE,e=ie?'attachEvent':'addEventListener',t=(ie?'on':'')+type; o[e](t,function(e){ var e=e||window.event,flag=fn.call(o,e); if(flag===false){ if(ie) e.cancelBubble=true,e.returnValue=false; else e.stopPropagation(),e.preventDefault(); } },false); } }); //支持JQ if(typeof jQuery!=='undefined'){ jQuery.fn.extend({ myFocus:function(p,fn){ if(!p) p={}; p.id=this[0].id; if(!p.id) p.id=this[0].id='mF__ID__'; myFocus.set(p,fn); } }); } })(); myFocus.set({ id:'myFocus',//ID pattern:'mF_expo2010'//风格 });