4顶

jquery+css打造左右圆角按钮焦点图切换特效

稿源：互联网 2022-04-02 21:40:38 点击： 7496 撤稿纠错

jquery+css制作圆角按钮焦点图图片切换特效，点击按钮或底部按钮即可切换图片。

以下讨论的是和jquery 圆角按钮焦点图图片切换相关的jquery+css打造左右圆角按钮焦点图切换特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>站长特效 jquery+css打造左右圆角按钮焦点图切换特效 站长特效网</title>
<style type=text/css>
 BODY {COLOR: #666}
UL, P{PADDING: 0px; MARGIN: 0px;}
A {COLOR: #333}
A:hover {COLOR: #e51a45; TEXT-DECORATION: none}
#imgPlay {
 MARGIN: 8px auto; OVERFLOW: hidden; WIDTH: 960px; ZOOM: 1; POSITION: relative; HEIGHT: 304px
}
#imgPlay .imgs IMG {
 BORDER-RIGHT: #dbdbdb 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #dbdbdb 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #dbdbdb 1px solid; WIDTH: 956px; PADDING-TOP: 1px; BORDER-BOTTOM: #dbdbdb 1px solid
}
#imgPlay .imgs LI {
 FLOAT: left; POSITION: relative
}
#imgPlay .imgs {
 WIDTH: 5760px
}
#imgPlay .btn {
 RIGHT: 12px; OVERFLOW: hidden; WIDTH: 112px; BOTTOM: 12px; TEXT-INDENT: -9999px; POSITION: absolute; HEIGHT: 29px;
}
#imgPlay .btn A {
 BACKGROUND: url(/img/bg_20110119zzjs_net.png) no-repeat;BACKGROUND-POSITION: 0px 0px; DISPLAY: block; WIDTH: 112px; HEIGHT: 29px;
}
#imgPlay .btn A:hover {
 BACKGROUND: url(/img/bg_20110119zzjs_net.png) no-repeat;BACKGROUND-POSITION: 0px -30px;
}
#imgPlay .prev {
 BACKGROUND: url(/img/player_20110119zzjs_net.png) no-repeat 0px 0px; LEFT: 1px; WIDTH: 46px; CURSOR: pointer; TEXT-INDENT: -9999px; POSITION: absolute; TOP: 110px; HEIGHT: 81px
}
#imgPlay .next {
 BACKGROUND: url(/img/player_20110119zzjs_net.png) no-repeat 0px 0px; LEFT: 1px; WIDTH: 46px; CURSOR: pointer; TEXT-INDENT: -9999px; POSITION: absolute; TOP: 110px; HEIGHT: 81px
}
#imgPlay .next {
 BACKGROUND-POSITION: right 0px; RIGHT: 1px; LEFT: auto
}
#imgPlay .num {
 DISPLAY: inline; LEFT: 400px; POSITION: absolute; TOP: 275px; HEIGHT: 19px
}
#imgPlay .num SPAN {
 DISPLAY: inline-block; BACKGROUND: url(/img/player_20110119zzjs_net.png) no-repeat -19px -83px; MARGIN: 0px 2px; OVERFLOW: hidden; WIDTH: 14px; CURSOR: pointer; LINE-HEIGHT: 0; HEIGHT: 13px
}
#imgPlay .num SPAN.on {
 BACKGROUND-POSITION: 1px -83px
}
#imgPlay .num .lc_zzjs_net {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/img/lc_20110119zzjs_net.png) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 13px; PADDING-TOP: 3px; HEIGHT: 16px
}
#imgPlay .num .mc {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/img/lc_20110119zzjs_net.png) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 13px; PADDING-TOP: 3px; HEIGHT: 16px
}
#imgPlay .num .rc_zzjs {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/img/lc_20110119zzjs_net.png) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 13px; PADDING-TOP: 3px; HEIGHT: 16px
}
#imgPlay .num .mc {
 BACKGROUND: url(/img/mc_20110119zzjs_net.png) repeat-x
}
#imgPlay .num .rc_zzjs {
 BACKGROUND: url(/img/rc_20110119zzjs_net.png) no-repeat
}
#imgPlay #numInner {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; POSITION: absolute; TOP: 275px; TEXT-ALIGN: center
}
</style>
<SCRIPT src="/img/jquery-zzjs.js" type=text/javascript></SCRIPT>
<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;}('$(Y).X(3(){$('a[1p="#"]').k(3(){$(4).2l('1p','2h:2w(0)')});$('.2v 8').k(3(){7 o=$(4);$(4).r('.s').d(3(){7 j=$(4).1J();o.r('.s').6('5').b(j).9('5');o.r('.2u').q().b(j).14(J)})});$('.2b 8').k(3(m){$(4).r('a').v('T',-$(4).u());$(4).e(3(){$(4).r('a').H({'T':'0'},x)},3(){$(4).r('a').H({'T':$(4).u()},{1U:x,23:3(){$(4).v('T',-$(4).U('8').u())}})})});$('#1q 1n').1Z('1Y',3(){$('#1q 1n').6('e');$(4).9('e')});$('.1h .1r').k(3(i){$(4).e(3(){$('.1h .1r').6('5').b(i).9('5');$('.1h 1o').q().b(i).C()},3(){$(4).r('1o').q();$(4).6('5')})});$('.22 8').k(3(i){$(4).d(3(){f(i==10)M l;$('.Z 8').6('5').b(i).9('5');$('.Z p').q().b(i).C()})});7 F=0;7 W=0;$('.Z .1B').d(3(){f(F==1){$(4).6('5');$('.Q').q(x);F=0}N{$(4).9('5');$('.Q').C(x);F=1}M l});$('.Q').e(3(){W=1},3(){W=0});$('1K').1Q('d',3(){f(F==1&&W==0){$('.Q').q(x);$('.Z .1B').6('5');F=0}});3 1z(){f($('.I 8').1s<=1)M;7 O=$('.I 8:1A');O.q();$('.I 8:1A').29();$('.I 8:1P').2a(O);O.25(J)}27.1R(1z,1F);$('.1C 8').k(3(i){$(4).e(3(){$('.1C 8').6('5').b(i).9('5')})});$('.1u 8').k(3(i){$(4).e(3(){$('.1u 8').6('5').b(i).9('5')})});$('.1y 1x').k(3(i){$(4).d(3(){$('.1y 1x').6('5').b(i).9('5')})});$('.1w 1a').k(3(i){$(4).e(3(){$('.1w 1a').6('5').b(i).9('5')})});$('.1V .1T').e(3(){$('.1l').14('1t')},3(){$('.1l').1N('1t')});$('.1W 8').e(3(){$(4).9('5')},3(){$(4).6('5')});$('.1S .1v a').k(3(i){$(4).d(3(){$('.1v a').6('5').b(i).9('5')})});$('.2r 8').e(3(){$(4).9('5')},3(){$(4).6('5')});$('.2q 8').e(3(){$(4).9('5')},3(){$(4).6('5')});$('.2s .2t').1g(3(){$('#1D').u(24);$(4).1c('\2p\2y')},3(){$('#1D').u('1O');$(4).1c('\2z\2x')});$('.19 .1E a').k(3(i){$(4).d(3(){$('.19 .1E a').6('5').b(i).9('5');$('.19 1a').q().b(i).C()})});$('.2f 8 .t .2g').d(3(){$(4).U().U().r('.t').C();$(4).U().q()})});$(Y).X(3(){7 t=l;7 1b='';7 V=J;7 w=2c;7 n=$('#g 8').1s;7 S=n*18;7 15=(w-(S+26))/2;7 c=0;$('#g').16(w*n);$('#g 8').k(3(i){1b+='<E></E>'});$('#A').16(S).1c(1b);$('#G .2o').16(S);$('#G .2k').v('1m',15);$('#A').v('1m',15+13);$('#A E:1P').9('5');3 17(D,1k){D=$(D)?$(D):D;D.9(1k).2j().6(1k)}$('#G .2n').d(3(){11(1)});$('#G .2m').d(3(){11(-1)});3 11(j){f($('#g').2i(':2d')==l){c+=j;f(c!=-1&&c!=n){$('#g').H({'y':-c*w+'z'},V)}N f(c==-1){c=n-1;$("#g").v({"y":-(w*(c-1))+"z"});$("#g").H({"y":-(w*c)+"z"},V)}N f(c==n){c=0;$("#g").v({"y":-w+"z"});$("#g").H({"y":0+"z"},V)}17($('#A E').b(c),'5')}}$('#A E').d(3(){c=$(4).1J();1L(c);17($('#A E').b(c),'5')});3 1L(i){f($('#g').v('y')!=-i*w+'z'){$('#g').v('y',-i*w+'z');$('#g').1N(0,3(){$('#g').14(J)})}}3 1e(){t=1R(3(){11(1)},1F)}3 1M(){f(t)1X(t)}$("#G").e(3(){1M()},3(){1e()});1e()});$(Y).X(3(){7 B=l;7 L=l;$('.1G .s').d(3(){f(B==l){$('.K').C(x);$(4).9('5');B=1i}N{$('.K').q(x);$(4).6('5');B=l}M l});$('.K').e(3(){L=1i},3(){L=l});$('1K').1Q('d',3(){f(B==1i&&L==l){$('.K').q(x);$('.1G .s').6('5');B=l}})});$(Y).X(3(){$('.1I').k(3(i){$(4).r('.R').d(3(){$('.1I').b(i).r('p').1g()})});$(".R").1g(3(){$(4).9("R-2")},3(){$(4).6("R-2")})});3 20(){7 1j=$('.21').u();7 1d=$('.P').u();7 1H=$('.P .28').u();7 1f=1j-1d;f(1f>0){7 h=1d+1f-12;$('.P').u(h)}f(1j-1H<2e){$('.P').u('1O')}}',62,160,'|||function|this|on|removeClass|var|li|addClass||eq||click|hover|if|actor||||each|false|||||hide|find|||height|css||200|marginLeft|px|numInner|isshowcity|show|ele|span|intIndexCity|imgPlay|animate|scroll_txt|500|s_c_links|ishovercitys|return|else|temp|artists_l|s_citys|hztitle|numWidth|top|parent|speed|intHoverCity|ready|document|u_city_nav||slide|||fadeIn|_left|width|cur||buy_caption|dl|str|html|lh|start|dh|toggle|category_list|true|rh|currentClass|minTips|left|td|ol|href|calendar|item|length|fast|list_1|tab_min_b|tr_commend|dd|vote_m|scrollList|last|more|live_top|city|tab_t|5000|s_city|list|sd|index|body|fade|stopt|fadeOut|auto|first|bind|setInterval|min_tip|help|duration|ticketInfo|videoList|clearInterval|mouseover|live|artHeight|artists_r|u_city_a|complete||slideDown||window|tab_min_in|remove|before|artist_l|960|animated|90|vocal_list|c7|javascript|is|siblings|num|attr|prev|next|mc|u5c55|tr_pic_list|news_list|sift|expand|info|perform|void|u7f29|u5f00|u6536'.split('|'),0,{}))
</SCRIPT>
</head>
<body style="text-align:center">
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新页面后看效果！
<DIV id=imgPlay>
<UL class=imgs id=actor>
  <LI><A href="http://www.zzjs.net/" target=_blank><IMG title="站长特效网一号图片" src="/img/20110119zzjs_net_1.jpg"></A><DIV class=btn><A title=立即购买 href="http://www.zzjs.net/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="http://www.zzjs.net/" target=_blank><IMG title="站长特效网二号图片" src="/img/20110119zzjs_net_2.jpg"></A><DIV class=btn><A title=立即购买 href="http://www.zzjs.net/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="http://www.zzjs.net/" target=_blank><IMG title="站长特效网三号图片" src="/img/20110119zzjs_net_3.jpg"></A><DIV class=btn><A title=立即购买 href="http://www.zzjs.net/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="http://www.zzjs.net/" target=_blank><IMG title="站长特效网四号图片" src="/img/20110119zzjs_net_4.jpg"></A><DIV class=btn><A title=立即购买 href="http://www.zzjs.net/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="http://www.zzjs.net/" target=_blank><IMG title="站长特效网五号图片" src="/img/20110119zzjs_net_5.jpg"></A><DIV class=btn><A title=立即购买 href="http://www.zzjs.net/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="http://www.zzjs.net/" target=_blank><IMG title="站长特效网六号图片" src="/img/20110119zzjs_net_6.jpg"></A><DIV class=btn><A title=立即购买 href="http://www.zzjs.net/" target=_blank>立即购买</A></DIV></LI>
</UL>
<DIV class=num>
<P class=lc_zzjs_net></P>
<P class=mc></P>
<P class=rc_zzjs></P></DIV>
<DIV class=num id=numInner></DIV>
<DIV class=prev>上一张</DIV>
<DIV class=next>下一张</DIV></DIV>
</body>
</html>

关于jquery+css打造左右圆角按钮焦点图切换特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011012467131.shtml方便下次再访问哦。

·上一篇： 淘宝网带左右按钮js+css焦点图切换特效
·下一篇： flash设计两屏圆角风格焦点图切换广告

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

jquery+css打造左右圆角按钮焦点图切换特效

文章分类LIST >>返回首页

最新游戏

最新新闻