<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点图效果</title>
<script type="text/javascript">
//引用myFocus库开始
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('g o={$:7(Y){h 13.2z(Y)},$$:7(T,6){h(2v 6==\'2m\'?6:8.$(6)).19(T)},$$1j:7(T,6){g N=[],n=0,a=6.19(T);K(g i=0;i<a.P;i++){f(a[i].1Z==6)N.11(a[i]);f(a[i].19(T).P){n=a[i].19(T).P}i=i+n;n=0}h N},$I:7(6,n){h 8.$$1j(\'I\',8.$$1j(\'X\',6)[n])},1k:7(t,b,c,d){h c*t/d+b},2r:7(t,b,c,d){h c*(t/=d)*t*t*t+b},1T:7(t,b,c,d){h-c*((t=t/d-1)*t*t*t-1)+b},2q:7(t,b,c,d){h((t/=d/2)<1)?(c/2*t*t*t*t+b):(-c/2*((t-=2)*t*t*t-2)+b)},9:7(6,9){h(+[1,])?1c.2p(6,1L)[9]:6.2x[9]},y:7(6,v){f(v!=V){v=v>x?x:(v<0?0:v);6.9.2u="1y(E="+v+")";6.9.E=(v/x)}G h(!+[1,])?((6.1A.1y)?6.1A.1y.E:x):((6.9.E)?6.9.E*x:x)},J:7(6,L,1e,1Q,Q,H){g y=L==\'E\'?1m:F,1w=8.9(6,L);f(y&&6.9.1d==\'1o\'){6.9.1d=\'\';8.y(6,0)}g t=0,b=y?8.y(6):2y(1w==\'w\'?0:1w),c=1e-b,d=1Q||2o,1i=Q||\'1T\',m=c>0?\'2t\':\'2s\';f(6[L+\'S\'])14(6[L+\'S\']);6[L+\'S\']=1z(7(){f(y&&t<d){o.y(6,1Y[m](o[1i](++t,b,c,d)))}G f(!y&&t<d){6.9[L]=1Y[m](o[1i](++t,b,c,d))+\'q\'}G{f(y&&1e==0){6.9.1d=\'1o\'}14(6[L+\'S\']);H&&H.2l(6)}},10);h 8},2n:7(6,M,H){8.J(6,\'E\',x,M==V?20:M,\'1k\',H);h 8},2C:7(6,M,H){8.J(6,\'E\',0,M==V?20:M,\'1k\',H);h 8},2D:7(6,1s,M,1C,H){K(g p 1K 1s)8.J(6,p,1s
,M,1C,H);h 8},2E:7(6){g J=[\'2B\',\'2k\',\'22\',\'2w\',\'B\',\'A\',\'E\'];K(g i=0;i<J.P;i++)f(6[J[i]+\'S\'])14(6[J[i]+\'S\']);h 8},1v:7(p){g 12=[],R=13.1X(\'9\');R.Q=\'1V/12\';f(p.1r)8.1r([8.$(p.Y)],p.9+\'2F\');f(p.B){12.11(\'.\'+p.9+\' *{29:0;23:0;2a:0;2e-9:1o;}.\'+p.9+\'{25:2i;B:\'+p.B+\'q;A:\'+p.A+\'q;1l:1p;2g:2j/1.5 2c,2b,2f-2d;24:#27;}.\'+p.9+\' .1P{25:2h;z-k:28;B:x%;A:x%;2A:#2M;1V-3k:1J;23-22:\'+0.3*p.A+\'q;24:#27 3l(3g://38.37.3c/3d/3e/3b-1P.36) 1J \'+0.4*p.A+\'q 39-3f;}.\'+p.9+\' .3n{B:\'+p.B+\'q;A:\'+p.A+\'q;1l:1p;}.\'+p.9+\' .16 I,.\'+p.9+\' .16 I 1h,.\'+p.9+\' .16-3m{B:\'+p.B+\'q;A:\'+p.1I+\'q!1M;3h-A:\'+p.1I+\'q!1M;1l:1p;}\')}f(R.1H){R.1H.3i=12.1g(\'\')}G{R.W=12.1g(\'\')}g 1t=8.$$(\'3j\',13)[0];1t.21(R,1t.2G)},3a:7(l){f(1c.1N){(7(){34{o.$(l.Y).D=l.9;o.1v(l)}2O(e){1S(2P.2Q,0)}})();1c.1N(\'2R\',7(){o[l.9](l)})} G{13.26("2N",7(){o.$(l.Y).D=l.9;o.1v(l)},F);1c.26(\'35\',7(){o[l.9](l)},F)}},2I:7(6,u){g s=[],n=8.$I(6,0).P,1u=u.P;K(g j=0;j<1u;j++){s.11(\'<X 1U=\'+u[j]+\'>\');K(g i=0;i<n;i++){s.11(\'<I>\'+(u[j]==\'1u\'?(\'<a>\'+(i+1)+\'</a>\'):(u[j]==\'16\'?8.$I(6,0)[i].W.2H(/\\>(.|\\n|\\r)*?(\\<\\/a\\>)/i,\'>\'+(8.$$(\'Z\',6)[i]?8.$$(\'Z\',6)[i].2J:\'\')+\'</a>\'):(u[j]==\'1R\'?\'<Z 1W=\'+(8.$$(\'Z\',6)[i].2K("1R")||8.$$(\'Z\',6)[i].1W)+\' />\':\'\')))+\'<1h></1h></I>\')};s.11(\'</X>\')};6.W+=s.1g(\'\')},1r:7(N,u){g U=13.1X(\'U\');U.D=u;N[0].1Z.21(U,N[0]);K(g i=0;i<N.P;i++)U.2L(N[i])},2S:7(6,u){6.W=\'<X 1U=\'+u+\'>\'+6.W+\'</X>\'},2T:7(1B,1F){h"18.30(8.$$(\'U\',18)[0]);g O=7(17){("+1B+")();f (k == n - 1&&17==V) k = -1;g 1O = 17 != V ? 17: k + 1;("+1F+")();k=1O;};O(k);f(l.w!==F) g w=1z(7(){O()},t);18.1x=7(){f(w) 14(w);};18.1f=7(){f(w) w=1z(7(){O()},t);}"},31:7(C,Q,1a){h"K (g j=0;j<n;j++){"+C+"[j].k=j;f("+Q+"==\'32\'){"+C+"[j].1x=7(){f(8.D!=\'33\') 8.D=\'1D\'};"+C+"[j].1f=7(){f(8.D==\'1D\') 8.D=\'\'};"+C+"[j].1E=7(){f(8.k!=k) {O(8.k);h F}};}G f("+Q+"==\'2Z\'){"+C+"[j].1x=7(){g 15=8;f("+1a+"==0){f(15.k!=k){O(15.k);h F}}G "+C+".d=1S(7(){f(15.k!=k) {O(15.k);h F}},"+(1a==V?x:1a)+")};"+C+"[j].1f=7(){2Y("+C+".d)};}G{2U(\'o 不支持这样的事件 \\"\'+"+Q+"+\'\\"\');2V;}}"},2W:7(6,1q,1G){h"g 1b=F;"+6+".1E=7(){8.D=8.D==\'"+1q+"\'?\'"+1G+"\':\'"+1q+"\';f(!1b){14(w);w=1L;1b=1m;}G{w=1m;1b=F;}}"},2X:7(1n){K(g p 1K 1n)8
=1n
}};',62,210,'||||||obj|function|this|style||||||if|var|return|||index|par|||myFocus||px||||cla||auto|100|opa||height|width|arrStr|className|opacity|false|else|fn|li|animate|for|prop|speed|arr|run|length|type|oStyle|Timer|tag|div|undefined|innerHTML|ul|id|img||push|css|document|clearInterval|self|txt|idx|box|getElementsByTagName|delay|_stop|window|display|val|onmouseout|join|span|st|_|linear|overflow|true|fnObj|none|hidden|cla1|wrap|params|oHead|num|initCSS|offset|onmouseover|alpha|setInterval|filters|fn1|easing|hover|onclick|fn2|cla2|styleSheet|txtHeight|center|in|null|important|attachEvent|next|loading|spd|thumb|setTimeout|easeOut|class|text|src|createElement|Math|parentNode||insertBefore|top|padding|background|position|addEventListener|fff|9999|margin|border|Geneva|Verdana|serif|list|sans|font|absolute|relative|12px|right|call|object|fadeIn|50|getComputedStyle|easeInOut|easeIn|floor|ceil|filter|typeof|bottom|currentStyle|parseInt|getElementById|color|left|fadeOut|slide|stop|_wrap|firstChild|replace|addList|alt|getAttribute|appendChild|666|DOMContentLoaded|catch|arguments|callee|onload|wrapIn|switchMF|alert|break|toggle|extend|clearTimeout|mouseover|removeChild|bind|click|current|try|load|gif|zhongsou|nethd|no|setting|28236|com|wtimg|i_41956|repeat|http|line|cssText|head|align|url|bg|pic'.split('|'),0,{}))
//引用myFocus库结束
myFocus.extend({
mF_qiyi:function(par){//奇艺主题风格
var box=this.$(par.id);
this.addList(box,['txt','num']);this.wrap([this.$$('ul',box)[0],this.$$('ul',box)[1]],'swt');
var swt=this.$$('div',box)[1],txt=this.$li(swt,1),num=this.$li(box,0);
var index=0,n=txt.length,t=par.time*1000;//运行时相关参数
//CSS
var txtH=par.txtHeight=='default'?34:par.txtHeight;//设置默认的文字高度
swt.style.width=par.width*n+'px';
//PLAY
eval(this.switchMF(function(){
num[index].className='';
},function(){
txt[next].style.top=0+'px';//复位
myFocus.slide(swt,{left:-par.width*next},50,'easeOut',function(){myFocus.slide(txt[next],{top:-txtH})});
num[next].className='current';
}))
eval(this.bind('num','par.trigger',par.delay));
}
});
//设置实例
myFocus.setting({
id:'myFocus',//焦点图ID
style:'mF_qiyi',//风格样式
time:3,//切换时间间隔
trigger:'mouseover',//触发切换模式：'click'(点击)/'mouseover'(悬停)
txtHeight:'default',//文字层高度设置，'default'为默认高度，0为隐藏
width:300,//图片宽(大图)，注意:整个焦点图的宽等于或大于图片宽
height:185,//图片高(大图)，注意同上
wrap:true//是否需要外套背景边框，true（是）/false（否）
});
</script>
<style>
*{margin:0;padding:0;border:0;list-style:none;}
body{background:#eee;padding:20px;}
/*=========mF_qiyi --奇艺主题========*/
.mF_qiyi_wrap{position:relative;float:left;overflow:hidden;padding:6px;border:1px solid #333;background:#333 url(bg.jpg) no-repeat;}/*背景边框*/
.mF_qiyi .loading{padding:6px;color:#f60;background:#333 url(bg.jpg) center no-repeat;}/*载入画面*/
.mF_qiyi .loading span{display:block;height:140px;padding-top:70px;background:url(loading.gif) center 100px no-repeat;}
.mF_qiyi .swt{height:100%;position:absolute;overflow:hidden;}
.mF_qiyi .swt .pic{height:100%;width:100%;}
.mF_qiyi .swt .pic li{height:100%;float:left;}
.mF_qiyi .swt .txt{width:100%;}
.mF_qiyi .swt .txt li{position:relative;float:left;height:34px;line-height:34px;}/*默认标题高度*/
.mF_qiyi .swt .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*文字样式*/
.mF_qiyi .swt .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}
.mF_qiyi .num{position:absolute;z-index:2;bottom:6px;right:12px;}
.mF_qiyi .num li{float:left;width:18px;height:16px;line-height:16px;margin-left:4px;overflow:hidden;text-align:center;border:1px solid #000;background:#ccc;cursor:pointer;}
.mF_qiyi .num li.current,.mF_qiyi .num li.hover{background:#f60;color:#fff;}/*当前/悬停按钮样式*/
</style>
</head>
<body>
<div id="myFocus"><!--焦点图盒子-->
<div class="loading"><span>请稍候...</span></div><!--载入画面-->
<ul class="pic"><!--内容列表-->
<li><a href="#"><img src="../demo1.jpg" thumb="" alt="www.coragne.cn" text="" /></a></li>
<li><a href="#"><img src="../demo2.jpg" thumb="" alt="corange.cn" text="" /></a></li>
<li><a href="#"><img src="../demo3.jpg" thumb="" alt="" text="" /></a></li>
<li><a href="#"><img src="../demo4.jpg" thumb="" alt="" text="" /></a></li>
</ul>
</div>
</body>
</html>
原文地址:http://www.corange.cn/archives/2011/04/3764.html
