大麦网图片翻转效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是大麦网图片翻转效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为大麦网图片翻转效果，属于站长常用代码" />
<LINK href="css/xixi.css" type=text/css rel=stylesheet>
<SCRIPT src="js/jquery-1.4.2.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/lanrentuku.js" type=text/javascript></SCRIPT>
<title>大麦网图片翻转效果</title>
</head>
<body style="text-align:center">

<ul class=artist_l>
  <li class=a1><a href="#" target=_blank><img 
  src="images/lanren-tuku.jpg" alt=张学友 border="0" 
  title=张学友></a>  </li>
  <li class=a2><img 
  src="images/1f473f38-1548-44dc-a012-8668d2eb5ccf.jpg"> 
  <a href="#" 
  target=_blank><strong>张震岳</strong><br><span>即将有5场演出</span><br>查看详情</a> </li>
  <li class=a3><img 
  src="images/36c4f27a-e6a5-4ba2-b114-ded0f60280ed.jpg"> 
  <a href="#" 
  target=_blank><strong>蔡琴</strong><br><span>即将有4场演出</span><br>查看详情</a> </li>
  <li class=a4><img 
  src="images/5e34e608-c406-4a4e-a13d-7ba75479b3db.jpg"> 
  <a href="#" 
  target=_blank><strong>郑钧</strong><br><span>即将有2场演出</span><br>查看详情</a> </li>
  <li class=a5><img 
  src="images/d3a13a37-e663-4fb1-8039-3f65443c3c77.jpg"> 
  <a href="#" 
  target=_blank><strong>费玉清</strong><br><span>即将有4场演出</span><br>查看详情</a> </li>
  <li class=a6><img 
  src="images/68b371d1-e2ec-4a52-a318-babc9a7c3224.jpg"> 
  <a href="#" 
  target=_blank><strong>陈绮贞</strong><br><span>即将有2场演出</span><br>查看详情</a> </li>
  <li class=a7><img 
  src="images/1857d41d-4aed-436e-89d2-37a440b9bfb9.jpg"> 
  <a href="#" 
  target=_blank><strong>王力宏</strong><br><span>即将有6场演出</span><br>查看详情</a> </li>
  <li class=a8><img 
  src="images/e39bbd6b-1d9b-4be7-a1d7-abbe6e8d166b.jpg"> 
  <a href="#" 
  target=_blank><strong>周杰伦</strong><br><span>即将有6场演出</span><br>查看详情</a> </li>
  <li class=a9><img 
  src="images/cc958824-b2f5-426a-8e35-53eacef66adc.jpg"> 
  <a href="#" 
  target=_blank><strong>迈克学摇滚</strong><br><span>即将有1场演出</span><br>查看详情</a> </li>
  <li class=a10><img 
  src="images/60679a11-f6e0-4374-9f6a-99dd0462668a.jpg"> 
  <a href="#" 
  target=_blank><strong>蔡依林</strong><br><span>即将有1场演出</span><br>查看详情</a> </li>
  <li class=a11><img 
  src="images/193df31a-23ac-4f9a-b679-3fd7027d2db3.jpg"> 
  <a href="#" 
  target=_blank><strong>程序员设计师联盟淘宝店</strong><br><span>lanrentuku.com</span><br>查看详情</a> </li>
  <li class=a12><img 
  src="images/78ea2f3b-0749-45d4-915d-8f3ae9528fbe.jpg"> 
  <a href="#" 
  target=_blank><strong>罗志祥</strong><br><span>即将有6场演出</span><br>查看详情</a> 
</li></ul>
</body>
</html>

JS代码(lanrentuku.js):

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,{
}
))

CSS代码(xixi.css):

.artist_l{MARGIN:20px 0px 2px;WIDTH:960px;POSITION:relative;HEIGHT:354px}
.artist_l .a1{LEFT:0px;POSITION:absolute;TOP:0px}
.artist_l .a2{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a3{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a4{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a5{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a6{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a7{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a8{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a9{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a10{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a11{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a12{LEFT:240px;OVERFLOW:hidden;WIDTH:110px;POSITION:absolute;TOP:0px;HEIGHT:110px}
.artist_l .a3 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a4 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a5 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a6 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a8 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a7 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a10 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a11 A{PADDING-RIGHT:10px;PADDING-LEFT:10px;FONT-SIZE:12px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:90px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a2 A{PADDING-RIGHT:20px;PADDING-LEFT:30px;FONT-SIZE:18px;PADDING-BOTTOM:15px;OVERFLOW:hidden;WIDTH:182px;PADDING-TOP:45px;HEIGHT:172px}
.artist_l .a12 A{PADDING-RIGHT:20px;PADDING-LEFT:30px;FONT-SIZE:18px;PADDING-BOTTOM:15px;OVERFLOW:hidden;WIDTH:182px;PADDING-TOP:45px;HEIGHT:172px}
.artist_l .a9 A{PADDING-RIGHT:20px;PADDING-LEFT:20px;FONT-SIZE:14px;PADDING-BOTTOM:10px;OVERFLOW:hidden;WIDTH:192px;PADDING-TOP:10px;HEIGHT:90px}
.artist_l .a2{WIDTH:232px;HEIGHT:232px}
.artist_l .a3{LEFT:240px;TOP:244px}
.artist_l .a4{LEFT:362px;TOP:244px}
.artist_l .a5{LEFT:482px;TOP:0px}
.artist_l .a6{LEFT:604px;TOP:0px}
.artist_l .a7{LEFT:482px;TOP:120px}
.artist_l .a8{LEFT:604px;TOP:120px}
.artist_l .a9{LEFT:482px;WIDTH:232px;TOP:244px}
.artist_l .a10{LEFT:726px;TOP:0px}
.artist_l .a11{LEFT:848px;TOP:0px}
.artist_l .a12{LEFT:726px;WIDTH:232px;TOP:120px;HEIGHT:232px}
.artist_l A{BACKGROUND:#ff0048;FILTER:alpha(opacity=90);LEFT:0px;COLOR:#fff;FONT-FAMILY:'Microsoft YaHei';POSITION:absolute;TOP:0px;opacity:.9}
.artist_l A:hover{COLOR:#fff}
.artist_l A STRONG{LINE-HEIGHT:2em}

附件:下载该文件资源,减少时间成本(增值服务)