一款双向无缝+按钮定位的焦点图实现代码

ttx9n · 发表于 2010-11-26 23:04:01

做这个焦点图弄了大个晚上，感觉挺晕的~发上来给大家踩一下吧双向无缝的原理很简单实现起来也不难，主要头痛的是在前后无缝与按钮定位之间的配合问题，不过还好现在总算OK了。

<!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>myFocus - tbhuabao</title> 
<style type="text/css"> 
*{margin:0;padding:0;border:0;list-style:none;} 
body{background:#fff;padding:20px;} 
/*=========mF_tbhuabao========*/ 
.mF_tbhuabao {background:#ddd;border:10px solid #333;overflow:visible;} 
.mF_tbhuabao .pic,.mF_tbhuabao .win{position:absolute;top:0;left:0;overflow:hidden;} 
.mF_tbhuabao .pic li{position:relative;float:left;overflow:hidden;} 
.mF_tbhuabao .txt li{position:absolute;z-index:2;width:100%;height:38px;line-height:38px;display:none;}/*默认标题高度*/ 
.mF_tbhuabao .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_tbhuabao .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:0.3;} 
.mF_tbhuabao .dot{position:absolute;bottom:0;left:0;height:32px;line-height:28px;width:100%;text-align:center;} 
.mF_tbhuabao .dot li{display:inline;margin:0 3px;} 
.mF_tbhuabao .dot li a{color:#999;font-size:26px;text-decoration:none;} 
.mF_tbhuabao .dot li.current a{color:#f60;} 
.mF_tbhuabao .prev,.mF_tbhuabao .next{font:700 53px/58px arial;width:37px;height:65px;overflow:hidden;position:absolute;z-index:4;left:-20px;cursor:pointer;background:url(http://547d.ipc.la/img/myfocus/btn-bg.gif) no-repeat;} 
.mF_tbhuabao .next{left:auto;right:-20px;} 
.mF_tbhuabao .prev a,.mF_tbhuabao .next a{display:block;color:#bbb;text-align:center;text-decoration:none;} 
.mF_tbhuabao .prev a:hover,.mF_tbhuabao .next a:hover{color:#f60;} 
</style> 
<script type="text/javascript"> 
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}('o B={$:7(1h){q 1k.3i(1h)},$$:7(16,6){q(28 6==\'33\'?6:9.$(6)).1l(16)},$$1A:7(16,6){o C=[],n=0,a=6.1l(16);J(o i=0;i<a.L;i++){8(a[i].2F==6)C.1a(a[i]);8(a[i].1l(16).L){n=a[i].1l(16).L}i=i+n;n=0}q C},$c:7(u,6){o 1r=6.1l(\'*\'),u=u.1Z(/\\-/g,\'\\\\-\'),29=3n 3e(\'(^|\\\\s)\'+u+\'(\\\\s|$)\'),C=[];J(o i=0,l=1r.L;i<l;i++){8(29.37(1r[i].H)){C.1a(1r[i]);2u}}q C[0]},$y:7(u,6){q 9.$$1A(\'y\',9.$c(u,6))},1R:7(t,b,c,d){q c*t/d+b},3a:7(t,b,c,d){q c*(t/=d)*t*t*t+b},25:7(t,b,c,d){q-c*((t=t/d-1)*t*t*t-1)+b},3g:7(t,b,c,d){q((t/=d/2)<1)?(c/2*t*t*t*t+b):(-c/2*((t-=2)*t*t*t-2)+b)},f:7(6,f){q(+[1,])?1q.3b(6,2x)[f]:6.3c[f]},E:7(6,v){8(v!=Y){v=v>I?I:(v<0?0:v);6.f.39="1B(N="+v+")";6.f.N=(v/I)}P q(!+[1,])?((6.2a.1B)?6.2a.1B.N:I):((6.f.N)?6.f.N*I:I)},R:7(6,T,1j,24,U,O){o E=T==\'N\'?1s:D,1x=9.f(6,T),27=28 1j===\'38\';8(E&&9.f(6,\'1o\')==\'1U\'){6.f.1o=\'34\';9.E(6,0)}o t=0,b=E?9.E(6):2n(1x==\'G\'?0:1x),c=27?1j/1:1j-b,d=24||36,1W=U||\'25\',m=c>0?\'3d\':\'2y\';8(6[T+\'19\'])1i(6[T+\'19\']);6[T+\'19\']=1u(7(){8(E&&t<d){B.E(6,1J[m](B[1W](++t,b,c,d)))}P 8(!E&&t<d){6.f[T]=1J[m](B[1W](++t,b,c,d))+\'x\'}P{8(E&&1j==0){6.f.1o=\'1U\'}1i(6[T+\'19\']);O&&O.3m(6)}},10);q 9},3k:7(6,F,O){9.R(6,\'N\',I,F==Y?20:F,\'1R\',O);q 9},3j:7(6,F,O){9.R(6,\'N\',0,F==Y?20:F,\'1R\',O);q 9},2p:7(6,1M,F,26,O){J(o p 2G 1M)9.R(6,p,1M[p],F,26,O);q 9},3o:7(6){o R=[\'1v\',\'2H\',\'23\',\'31\',\'K\',\'S\',\'N\'];J(o i=0;i<R.L;i++)8(6[R[i]+\'19\'])1i(6[R[i]+\'19\']);q 9},1D:7(p){o 17=[],h=p.S||2Q,14=1k.2J(\'f\');14.U=\'1K/17\';8(p.1z)9.1z([9.$(p.1h)],p.f+\'2N\');8(p.17!==D)17.1a(\'.\'+p.f+\' *{2M:0;2b:0;2K:0;2L-f:1U;}.\'+p.f+\'{1L:2h;K:\'+p.K+\'x;S:\'+h+\'x;1Y:1T;2Y:2Z/1.5 2R,2X,2W-2S;2c:#2i;}.\'+p.f+\' .1N{1L:2T;z-k:2U;K:I%;S:I%;2V:#3l;1K-3p:2j;2b-23:\'+0.3*h+\'x;2c:#2i 3U(3V://3W.3X.3T/3Z/3O/3P-1N.3Q) 2j \'+0.4*h+\'x 3Y-43;}.\'+p.f+\' .41{1L:2h;K:\'+p.K+\'x;S:\'+h+\'x;1Y:1T;}.\'+p.f+\' .1d y,.\'+p.f+\' .1d y 1Q,.\'+p.f+\' .1d-3S{K:\'+p.K+\'x;S:\'+p.2g+\'x!2d;3M-S:\'+p.2g+\'x!2d;1Y:1T;}.\'+p.f+\' .1d y p a{1o:3y;}\');8(14.2e){14.2e.3z=17.1F(\'\')}P{14.1e=17.1F(\'\')}o 1y=9.$$(\'3v\',1k)[0];1y.2I(14,1y.3r)},3s:7(w){8(1q.2f){(7(){3t{B.$(w.1h).H+=\' \'+w.f;B.1D(w)}3A(e){2t(3B.3I,0)}})();1q.2f(\'3J\',7(){B[w.f](w)})}　　P{1k.2k("3K",7(){B.$(w.1h).H+=\' \'+w.f;B.1D(w)},D);1q.2k(\'3H\',7(){B[w.f](w)},D)}},3G:7(6,u){o s=[],X=9.$$(\'X\',6)[0],y=9.$$1A(\'y\',X),A,n=y.L,1H=u.L;J(o j=0;j<1H;j++){s.1a(\'<X 2C=\'+u[j]+\'>\');J(o i=0;i<n;i++){A=9.$$(\'A\',y[i])[0];s.1a(\'<y>\'+(u[j]==\'1H\'?(\'<a>\'+(i+1)+\'</a>\'):(u[j]==\'1d\'&&A?y[i].1e.1Z(/<A(.|\\n|\\r)*?(\\>\\<\\/a\\>)/i,A.3D+\'</a>\')+\'<p>\'+A.2l("1K")+\'</p>\':(u[j]==\'22\'&&A?\'<A 21=\'+(A.2l("22")||A.21)+\' />\':\'\')))+\'<1Q></1Q></y>\')};s.1a(\'</X>\')};6.1e+=s.1F(\'\')},1z:7(C,u){o 1c=1k.2J(\'1c\');1c.H=u;C[0].2F.2I(1c,C[0]);J(o i=0;i<C.L;i++)1c.3F(C[i])},3E:7(6,u){6.1e=\'<X 2C=\'+u+\'>\'+6.1e+\'</X>\'},3C:7(2A,2q,2E,d){q"o 1G=9.$c(\'1N\',1g),W="+2E+",11=1s,1b="+d+"||\'1v\',1m=1b==\'1v\'||V==\'2H\'?w.K:w.S;8(W){1C.f[1b]=-1m*n+\'x\';k+=n;}8(1G)1g.3L(1G);o Q=7(13){("+2A+")();8(W&&k==2*n-1&&11!=1){1C.f[1b]=-(n-1)*1m+\'x\';k=n-1}8(W&&k==0&&11!=2){1C.f[1b]=-n*1m+\'x\';k=n}8(!W&&k==n-1&&13==Y)k=-1;8(W&&13!==Y&&k>n-1&&!11) 13+=n;o Z=13!==Y?13:k+1,1w=k;("+2q+")();k=Z;11=D;};Q(k);8(w.G!==D)o G=1u(7(){Q()},t);1g.1I=7(){8(G)1i(G)};1g.1X=7(){8(G)G=1u(7(){Q()},t)};"},3q:7(M,U,1n){q"J (o j=0;j<n;j++){"+M+"[j].k=j;8("+U+"==\'3u\'){"+M+"[j].1I=7(){8(9.H!=\'3N\') 9.H=\'2s\'};"+M+"[j].1X=7(){8(9.H==\'2s\') 9.H=\'\'};"+M+"[j].1p=7(){8(9.k!=k) {Q(9.k);q D}};}P 8("+U+"==\'3x\'){"+M+"[j].1I=7(){o 1f=9;8("+1n+"==0){8(1f.k!=k){Q(1f.k);q D}}P "+M+".d=2t(7(){8(1f.k!=k) {Q(1f.k);q D}},"+(1n==Y?I:1n)+")};"+M+"[j].1X=7(){3w("+M+".d)};}P{42(\'40 3R : \\"\'+"+U+"+\'\\"\');2u;};J(o i=0,1P=9.$$(\'a\',1g),2v=1P.L;i<2v;i++) 1P[i].32=7(){9.2P();}}"},2O:7(6,1O,2w){q"o 1t=D;"+6+".1p=7(){9.H=9.H==\'"+1O+"\'?\'"+2w+"\':\'"+1O+"\';8(!1t){1i(G);G=2x;1t=1s;}P{G=1s;1t=D;}}"},3h:7(6,V,2z,1V,F){q"o 15={},12="+2z+",2m=1J.2y("+1V+"/2),2B=2n("+6+".f["+V+"])||0,18=Z>=n?Z-n:Z,2r="+F+"||30,2o=12*(n-"+1V+"),1S=12*18+2B;8(1S>12*2m&&18!==n-1) 15["+V+"]=\'-\'+12;8(1S<12&&18!==0) 15["+V+"]=\'+\'+12;8(18===n-1) 15["+V+"]=-2o;8(18===0) 15["+V+"]=0;B.2p("+6+",15,2r);"},35:7(1w,Z){q 1w+".1p=7(){11=1;Q(k>0?k-1:n-1);};"+Z+".1p=7(){11=2;o 2D=k>=2*n-1?n-1:k;Q(k==n-1&&!W?0:2D+1);}"},3f:7(1E){J(o p 2G 1E)9[p]=1E[p]}}',62,252,'</td></tr></table>

</div>
<div id="comment_112710" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
<div class="mtw mbw">
<h3 class="pbm mbm bbda">相关帖子</h3>
<ul class="xl xl2 cl"><li>• <a href="thread-81598-1-1.html" title="div+css实现自适应宽度按钮" target="_blank">div+css实现自适应宽度按钮</a></li>
<li>• <a href="thread-81674-1-1.html" title="用滑动门技术设计按钮的图文教程" target="_blank">用滑动门技术设计按钮的图文教程</a></li>
<li>• <a href="thread-81758-1-1.html" title="用CSS实现的一张图完成的按钮效果" target="_blank">用CSS实现的一张图完成的按钮效果</a></li>
<li>• <a href="thread-81947-1-1.html" title="凸起的按钮效果" target="_blank">凸起的按钮效果</a></li>
<li>• <a href="thread-82410-1-1.html" title="Flex中给按钮添加链接点击链接打开网页的方法" target="_blank">Flex中给按钮添加链接点击链接打开网页的方法</a></li>
<li>• <a href="thread-82431-1-1.html" title="flex中如何用图像给按钮做皮肤" target="_blank">flex中如何用图像给按钮做皮肤</a></li>
<li>• <a href="thread-82435-1-1.html" title="flex渐变色制作圆角橙色按钮示例代码" target="_blank">flex渐变色制作圆角橙色按钮示例代码</a></li>
<li>• <a href="thread-82646-1-1.html" title="FCK编辑器（FCKEditor）添加新按钮和功能的修改方法" target="_blank">FCK编辑器（FCKEditor）添加新按钮和功能的修改方法</a></li>
<li>• <a href="thread-82650-1-1.html" title="FCKeditor添加自定义按钮的方法" target="_blank">FCKeditor添加自定义按钮的方法</a></li>
<li>• <a href="thread-82838-1-1.html" title="如何禁止浏览器使用后退按钮功能" target="_blank">如何禁止浏览器使用后退按钮功能</a></li>
</ul>
</div>
</td>
</tr>
<tr id="_postposition112710"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=57&tid=55695&reppost=112710&extra=&page=1" onclick="showWindow('reply', this.href)">回复</a>
<div class="y" style="line-height:14px;margin-top:6px;position:relative;"><div id="bdshare" class="bdshare_b" style="line-height: 12px;"><img src="http://share.baidu.com/static/images/type-button-1.jpg" /></div>
    <script type="text/javascript" id="bdshare_js" data="type=button&uid=250039" ></script>
    <script type="text/javascript" id="bdshell_js"></script>
    <script type="text/javascript">
        document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();
    </script></div></em>

<ul id="mgc_post_112710_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_112710')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_112711" ><table id="pid112711" class="plhin" summary="pid112711" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar112711" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1955.html" target="_blank" class="xw1">回复用户3</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo112711" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo112711_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1955.html" target="_blank" class="xi2">回复用户3</a></strong>
<em>当前离线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1955&do=profile" target="_blank" class="xi2">220</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1955&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo112711')"><a href="space-uid-1955.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1955&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1955&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1955&do=thread&type=reply&view=me&from=space" class="xi2">55</a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1955&do=profile" class="xi2">220</a></p>积分</td></table></div>

<p><span id="g_up112711" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 3" /><img src="static/image/common/star_level1.gif" alt="Rank: 3" /></span></p>
<div id="g_up112711_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 220, 距离下一级还需 280 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_112711" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up112711_menu'});"><span class="pbr2" style="width:6%;"></span></span></p>
<div id="g_up112711_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 220, 距离下一级还需 280 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1955&touid=1955&pmid=0&daterange=2&pid=112711&tid=55695" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon112711" src="static/image/common/online_member.gif" />
<em id="authorposton112711">发表于 2010-11-26 23:05:47</em>
<span class="pipe">|</span>
<a href="thread-55695-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_112711">
obj|function|if|this</td></tr></table>

</div>
<div id="comment_112711" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition112711"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=57&tid=55695&repquote=112711&extra=&page=1" onclick="showWindow('reply', this.href)">回复</a>
<a class="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=55695&pid=112711&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_support_112711').innerHTML ? $('review_support_112711').innerHTML : 0) + ' 人 支持'">支持 <span id="review_support_112711"></span></a>
<a class="replysubtract" href="forum.php?mod=misc&action=postreview&do=against&tid=55695&pid=112711&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_against_112711').innerHTML ? $('review_against_112711').innerHTML : 0) + ' 人 反对'">反对 <span id="review_against_112711"></span></a>
</em>

<ul id="mgc_post_112711_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_112711')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_112712" ><table id="pid112712" class="plhin" summary="pid112712" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar112712" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1960.html" target="_blank" class="xw1">回复用户2</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo112712" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo112712_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1960.html" target="_blank" class="xi2">回复用户2</a></strong>
<em>当前离线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1960&do=profile" target="_blank" class="xi2">293</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1960&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo112712')"><a href="space-uid-1960.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1960&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1960&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1960&do=thread&type=reply&view=me&from=space" class="xi2">74</a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1960&do=profile" class="xi2">293</a></p>积分</td></table></div>

<p><span id="g_up112712" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 3" /><img src="static/image/common/star_level1.gif" alt="Rank: 3" /></span></p>
<div id="g_up112712_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 293, 距离下一级还需 207 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_112712" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up112712_menu'});"><span class="pbr2" style="width:31%;"></span></span></p>
<div id="g_up112712_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 293, 距离下一级还需 207 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1960&touid=1960&pmid=0&daterange=2&pid=112712&tid=55695" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon112712" src="static/image/common/online_member.gif" />
<em id="authorposton112712">发表于 2010-11-26 23:07:29</em>
<span class="pipe">|</span>
<a href="thread-55695-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_112712">
style</td></tr></table>

</div>
<div id="comment_112712" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition112712"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=57&tid=55695&repquote=112712&extra=&page=1" onclick="showWindow('reply', this.href)">回复</a>
<a class="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=55695&pid=112712&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_support_112712').innerHTML ? $('review_support_112712').innerHTML : 0) + ' 人 支持'">支持 <span id="review_support_112712"></span></a>
<a class="replysubtract" href="forum.php?mod=misc&action=postreview&do=against&tid=55695&pid=112712&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_against_112712').innerHTML ? $('review_against_112712').innerHTML : 0) + ' 人 反对'">反对 <span id="review_against_112712"></span></a>
</em>

<ul id="mgc_post_112712_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_112712')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_112713" ><table id="pid112713" class="plhin" summary="pid112713" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar112713" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1958.html" target="_blank" class="xw1">回复用户4</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo112713" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo112713_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1958.html" target="_blank" class="xi2">回复用户4</a></strong>
<em>当前离线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1958&do=profile" target="_blank" class="xi2">239</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1958&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo112713')"><a href="space-uid-1958.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1958&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1958&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1958&do=thread&type=reply&view=me&from=space" class="xi2">62</a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1958&do=profile" class="xi2">239</a></p>积分</td></table></div>

<p><span id="g_up112713" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 3" /><img src="static/image/common/star_level1.gif" alt="Rank: 3" /></span></p>
<div id="g_up112713_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 239, 距离下一级还需 261 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_112713" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up112713_menu'});"><span class="pbr2" style="width:13%;"></span></span></p>
<div id="g_up112713_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 239, 距离下一级还需 261 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1958&touid=1958&pmid=0&daterange=2&pid=112713&tid=55695" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon112713" src="static/image/common/online_member.gif" />
<em id="authorposton112713">发表于 2010-11-26 23:08:29</em>
<span class="pipe">|</span>
<a href="thread-55695-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_112713">
||index</td></tr></table>

</div>
<div id="comment_112713" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition112713"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=57&tid=55695&repquote=112713&extra=&page=1" onclick="showWindow('reply', this.href)">回复</a>
<a class="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=55695&pid=112713&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_support_112713').innerHTML ? $('review_support_112713').innerHTML : 0) + ' 人 支持'">支持 <span id="review_support_112713"></span></a>
<a class="replysubtract" href="forum.php?mod=misc&action=postreview&do=against&tid=55695&pid=112713&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_against_112713').innerHTML ? $('review_against_112713').innerHTML : 0) + ' 人 反对'">反对 <span id="review_against_112713"></span></a>
</em>

<ul id="mgc_post_112713_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_112713')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_112714" ><table id="pid112714" class="plhin" summary="pid112714" cellspacing="0" cellpadding="0">
<tr>
 <td class="pls" rowspan="2">
<div id="favatar112714" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1957.html" target="_blank" class="xw1">回复用户6</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo112714" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo112714_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1957.html" target="_blank" class="xi2">回复用户6</a></strong>
<em>当前离线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1957&do=profile" target="_blank" class="xi2">257</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1957&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo112714')"><a href="space-uid-1957.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1957&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1957&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1957&do=thread&type=reply&view=me&from=space" class="xi2">65</a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1957&do=profile" class="xi2">257</a></p>积分</td></table></div>

<p><span id="g_up112714" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 3" /><img src="static/image/common/star_level1.gif" alt="Rank: 3" /></span></p>
<div id="g_up112714_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 257, 距离下一级还需 243 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_112714" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up112714_menu'});"><span class="pbr2" style="width:19%;"></span></span></p>
<div id="g_up112714_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">中级会员, 积分 257, 距离下一级还需 243 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1957&touid=1957&pmid=0&daterange=2&pid=112714&tid=55695" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon112714" src="static/image/common/online_member.gif" />
<em id="authorposton112714">发表于 2010-11-26 23:09:17</em>
<span class="pipe">|</span>
<a href="thread-55695-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_112714">
|var||return</td></tr></table>

</div>
<div id="comment_112714" class="cm">
</div>

</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition112714"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=57&tid=55695&repquote=112714&extra=&page=1" onclick="showWindow('reply', this.href)">回复</a>
<a class="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=55695&pid=112714&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_support_112714').innerHTML ? $('review_support_112714').innerHTML : 0) + ' 人 支持'">支持 <span id="review_support_112714"></span></a>
<a class="replysubtract" href="forum.php?mod=misc&action=postreview&do=against&tid=55695&pid=112714&hash=f35edaaa"  onclick="showWindow('login', this.href)" onmouseover="this.title = ($('review_against_112714').innerHTML ? $('review_against_112714').innerHTML : 0) + ' 人 反对'">反对 <span id="review_against_112714"></span></a>
</em>

<ul id="mgc_post_112714_menu" class="p_pop mgcmn" style="display: none;">
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_112714')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="post_112715" ><table id="pid112715" class="plhin" summary="pid112715" cellspacing="0" cellpadding="0">
<tr>
 <a name="lastpost"></a><td class="pls" rowspan="2">
<div id="favatar112715" class="pls cl favatar">
<div class="pi">
<div class="authi"><a href="space-uid-1956.html" target="_blank" class="xw1">回复用户5</a>
</div>
</div>
<div class="p_pop blk bui card_gender_0" id="userinfo112715" style="display: none; margin-top: -11px;">
<div class="m z">
<div id="userinfo112715_ma"></div>
</div>
<div class="i y">
<div>
<strong><a href="space-uid-1956.html" target="_blank" class="xi2">回复用户5</a></strong>
<em>当前在线</em>
</div><dl class="cl">
<dt>积分</dt><dd><a href="home.php?mod=space&uid=1956&do=profile" target="_blank" class="xi2">186</a></dd>
</dl><div class="imicn">
<a href="home.php?mod=space&uid=1956&do=profile" target="_blank" title="查看详细资料"><img src="static/image/common/userinfo.gif" alt="查看详细资料" /></a>
</div>
<div id="avatarfeed"><span id="threadsortswait"></span></div>
</div>
</div>
<div>
<div class="avatar" onmouseover="showauthor(this, 'userinfo112715')"><a href="space-uid-1956.html" class="avtm" target="_blank"><img src="http://www.31460.com/uc_server/avatar.php?uid=1956&size=middle" /></a></div>
</div>
<div class="tns xg2"><table cellspacing="0" cellpadding="0"><th><p><a href="home.php?mod=space&uid=1956&do=thread&type=thread&view=me&from=space" class="xi2">0</a></p>主题</th><th><p><a href="home.php?mod=space&uid=1956&do=thread&type=reply&view=me&from=space" class="xi2"><span title="14593">1万</span></a></p>回帖</th><td><p><a href="home.php?mod=space&uid=1956&do=profile" class="xi2">186</a></p>积分</td></table></div>

<p><span id="g_up112715" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"><img src="static/image/common/star_level2.gif" alt="Rank: 2" /></span></p>
<div id="g_up112715_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">注册会员, 积分 186, 距离下一级还需 14 积分</div></div>

<p><span class="pbg2"  id="upgradeprogress_112715" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!', 'menuid':'g_up112715_menu'});"><span class="pbr2" style="width:90%;"></span></span></p>
<div id="g_up112715_menu" class="tip tip_4" style="display: none;"><div class="tip_horn"></div><div class="tip_c">注册会员, 积分 186, 距离下一级还需 14 积分</div></div>

<dl class="pil cl"></dl><ul class="xl xl2 o cl">
<li class="pm2"><a href="home.php?mod=spacecp&ac=pm&op=showmsg&handlekey=showmsg_1956&touid=1956&pmid=0&daterange=2&pid=112715&tid=55695" onclick="showWindow('sendpm', this.href);" title="发消息" class="xi2">发消息</a></li>
</ul>
</div>
</td>
<td class="plc">
<div class="pi">
<div class="pti">
<div class="pdbt">
</div>
<div class="authi">
<img class="authicn vm" id="authicon112715" src="static/image/common/online_member.gif" />
<em id="authorposton112715">发表于 2010-11-26 23:10:05</em>
<span class="pipe">|</span>
<a href="thread-55695-1-1.html" rel="nofollow">显示全部楼层</a>
</div>
</div>
</div><div class="pct"><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_112715">
|cla||par|px|li||img|myFocus|arr|false|opa|speed|auto|className|100|for|width|length|arrStr|opacity|fn|else|run|animate|height|prop|type|dir|less|ul|undefined|next||_turn|scDis|idx|oStyle|scPar|tag|css|scIdx|Timer|push|_dir|div|txt|innerHTML|self|box|id|clearInterval|val|document|getElementsByTagName|_dis|delay|display|onclick|window|tags|true|_stop|setInterval|left|prev|offset|oHead|wrap|_|alpha|pics|initCSS|fnObj|join|ld|num|onmouseover|Math|text|position|params|loading|cla1|lk|span|linear|scD|hidden|none|sn|st|onmouseout|overflow|replace||src|thumb|top|spd|easeOut|easing|am|typeof|reg|filters|padding|background|important|styleSheet|attachEvent|txtHeight|relative|fff|center|addEventListener|getAttribute|scN|parseInt|scMax|slide|fn2|scSpd|hover|setTimeout|break|ln|cla2|null|floor|dis|fn1|scDir|class|tIdx|isless|parentNode|in|right|insertBefore|createElement|border|list|margin|_wrap|toggle|blur|296|Verdana|serif|absolute|9999|color|sans|Geneva|font|12px||bottom|onfocus|object|block|turn|50|test|string|filter|easeIn|getComputedStyle|currentStyle|ceil|RegExp|extend|easeInOut|scroll|getElementById|fadeOut|fadeIn|666|call|new|stop|align|bind|firstChild|setting|try|click|head|clearTimeout|mouseover|inline|cssText|catch|arguments|switchMF|alt|wrapIn|appendChild|addList|load|callee|onload|DOMContentLoaded|removeChild|line|current|i_41956|28236|gif|Setting|bg|com|url|http|nethd|zhongsou|no|wtimg|Error|pic|alert|repeat'.split('|'),0,{})); 
myFocus.extend({//*********************tbhuabao****************** 
mF_tbhuabao:function(par){var box=this.$(par.id);this.addList(box,['dot','txt','prev','next']);this.wrap([this.$c('pic',box)],'win');var pics=this.$c('pic',box),dot=this.$li('dot',box),txt=this.$li('txt',box),pre=this.$c('prev',box),nex=this.$c('next',box);var index=0,n=txt.length,t=par.time*1000;pics.innerHTML+=pics.innerHTML;for(var i=0;i<n;i++)dot[i].innerHTML='<a href="javascript:;">•</a>';pre.innerHTML='<a href="javascript:;">‹</a>';nex.innerHTML='<a href="javascript:;">›</a>';var win=this.$c('win',box),pic=this.$li('pic',box),dots=this.$c('dot',box),dotH=32,arTop=par.height/2-32;box.style.height=par.height+dotH+'px';win.style.cssText='width:'+par.width+'px;height:'+par.height+'px;';pics.style.width=par.width*2*n+'px';for(var i=0;i<n;i++){txt[i].style.bottom=dotH+'px'}for(var i=0;i<2*n;i++)pic[i].style.cssText='width:'+par.width+'px;height:'+par.height+'px;';pre.style.cssText=nex.style.cssText='top:'+arTop+'px;';eval(this.switchMF(function(){txt[index>=n?(index-n):index].style.display='none';dot[index>=n?(index-n):index].className=''},function(){myFocus.slide(pics,{left:-par.width*next});txt[next>=n?(next-n):next].style.display='block';dot[next>=n?(next-n):next].className='current'},'true'));eval(this.bind('dot','"click"'));eval(this.turn('pre','nex'))} 
}); 
myFocus.setting({ 
id:'myFocus',//焦点图ID 
style:'mF_tbhuabao',//风格样式 
time:3,//切换时间间隔(秒) 
trigger:'click',//触发切换模式：'click'(点击)/'mouseover'(悬停) 
width:450,//设置宽度(主图区) 
height:296,//设置高度(主图区) 
txtHeight:'default'//文字层高度设置，'default'为默认高度，0为隐藏 
}); 
</script> 
</head> 
<body> 
 
请稍候... 
<ul class="pic"> 
<li><a href="#"><img src="1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></a></li> 
<li><a href="#"><img src="2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></a></li> 
<li><a href="#"><img src="3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></a></li> 
<li><a href="#"><img src="4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></a></li> 
<li><a href="#"><img src="5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></a></li> 
</ul> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
可随意更改大小的，里面的参数已经详细说明了，喜欢的就拿去吧

jasonlong · 发表于 2023-2-13 08:13:51

啊，数码撒飒飒飒飒

xf9hlg1 · 发表于 2023-4-26 05:26:01

好东西一定要看看！

kestlhoxn · 发表于 2023-9-8 03:27:11

儿童服务绯闻绯闻绯闻

q215357618 · 发表于 2024-1-16 23:56:08

激动人心，无法言表！

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 一款双向无缝+按钮定位的焦点图实现代码