Super-beautiful black JS focus chart switching effect

Source: Internet
Author: User
Tags bind eval extend
Tip: you can modify some code before running

<!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" /><base href="http://hi.baidu.com/koen_li" /><title>MyFocus-1.0BETA2</title><script type="text/javascript">// Reference the myFocus library to start 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: 7 (Y) {h 13.2z (Y)}, $: 7 (T, 6) {h (2 v 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 '? 1 m: F, 1 w = 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 (1 w = 'W '? 0: 1 w), 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[p],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) + '') :( u [j] = '16 '? 8. $ I (6, 0) [I]. 2h 2 H (/\> (. | \ n | \ r )*? (\ </A \>)/I, '>' + (8. $ ('Z', 6) [I]? 8. $ ('Z', 6) [I]. 2J: '') +'') :( u [j] = '1r '? '<Z 1W='+(8.$$('Z',6)[i].2K("1R")||8.$$('Z',6)[i].1W)+' />': '') +' <1 h></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>'}, 2 T: 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[p]=1n[p]}};',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;//运行时相关参数//CSSvar txtH=par.txtHeight=='default'?34:par.txtHeight;//设置默认的文字高度swt.style.width=par.width*n+'px';//PLAYeval(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',//焦点图IDstyle:'mF_qiyi',//风格样式time:3,//切换时间间隔trigger:'mouseover',//触发切换模式:'click'(点击)/'mouseover'(悬停)txtHeight:'default',//文字层高度设置,'default'为默认高度,0为隐藏width:450,//图片宽(大图),注意:整个焦点图的宽等于或大于图片宽height:296,//图片高(大图),注意同上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(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) no-repeat;}/*背景边框*/.mF_qiyi .loading{padding:6px;color:#f60;background:#333 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) center no-repeat;}/*载入画面*/.mF_qiyi .loading span{display:block;height:140px;padding-top:70px;background:url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.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">请稍候...</div><!--载入画面--><ul class="pic"><!--内容列表--> <li></li> <li></li> <li></li> <li></li> </ul></div></body></html></td> </tr></table>
提示:您可以先修改部分代码再运行

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.