JQ酷狗首页带文字说明焦点图特效代码

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

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

以下是 JQ酷狗首页带文字说明焦点图特效代码的示例演示效果:

当前平台(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=utf-8" />
<title>JQ酷狗首页带文字说明焦点图</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/base-min.js"></script>
</head>
<body>
 <div class="banner">
    <div class="fl" id="focus"> 
			<a title="Gogomusic繁星直播间" href="#"   target="_blank" hidefocus="true">
             <img alt="Gogomusic繁星直播间" src="images/01.jpg" width="694" height="323" ><s></s><p>
             <span class="text">Gogomusic繁星直播间</span></p></a>
                
			<a title="酷狗 发现好音乐" href="#"   target="_blank" hidefocus="true">
            <img alt="酷狗 发现好音乐" src="images/02.jpg" width="694" height="323" ><s></s><p>
            <span class="text">酷狗 发现好音乐</span></p></a>
			
            <a title="酷狗音乐手机版 超级功能--无线共享音乐！" href="#"  target="_blank" hidefocus="true">
            <img alt="酷狗音乐手机版 超级功能--无线共享音乐！" src="images/03.jpg" width="694" height="323" ><s></s><p>
            <span class="text">酷狗音乐手机版 超级功能--无线共享音乐！</span></p></a>
			
            <a title="专辑推荐：中国梦之声 第三期" href="#"   target="_blank" hidefocus="true">
            <img alt="专辑推荐：中国梦之声 第三期" src="images/04.jpg" width="694" height="323" ><s></s><p>
            <span class="text">专辑推荐：中国梦之声 第三期</span>
            <span class="play"></span></p></a>
			
            <a title="戴佩妮独立作乐，创业作 「纯属意外」" href="#"   target="_blank" hidefocus="true">
            <img alt="戴佩妮独立作乐，创业作 「纯属意外」" src="images/05.jpg" width="694" height="323" ><s></s><p><span class="text">戴佩妮独立作乐，创业作 「纯属意外」</span><span class="play" ></span></p></a>
			
            <a title="专辑推荐：《中国最强音第八场》" href="#"  target="_blank" hidefocus="true">
            <img alt="专辑推荐：《中国最强音第八场》" src="images/06.jpg" width="694" height="323" ><s></s><p><span class="text">专辑推荐：《中国最强音第八场》</span><span class="play" ></span></p></a>
		      <div id="ctr">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
			  
</div>
    </div>

  </div> 

<script type="text/javascript" src="js/Tab-min.js"></script>
 

<script type="text/javascript">
var isDisplayAd = '0';

	t1 = new Tab("ctr", "span", "focus", "a", {
		autoPlay : true,
		timeout : 5000,
		delay:200,
		event : "mouseover"	
	});		
	
	t2 = new Tab("tab2", "span", Kg.$C("song")[0], "div",{event:"mouseover",callback:function(){
		var cidx = t2.currentIndex;
		var url = getCommendMoreUrl(cidx);
		Kg.$C("more","tab2")[0].href = url; 
	}});

	t3 = new Tab("sgl_song", "span", "single0", "div", {event:"mouseover"});
	
	t3_1 = new Tab(Kg.$C("single_nav","snl_song_hy")[0], "span", "snl_song_hy", "div", {event:"mouseover"});
	t3_2 = new Tab(Kg.$C("single_nav","snl_song_om")[0], "span", "snl_song_om", "div", {event:"mouseover"});
	//t3_3 = new Tab(Kg.$C("single_nav","snl_song_cy")[0], "span", "snl_song_cy", "div", {event:"mouseover"});
	t3_4 = new Tab(Kg.$C("single_nav","snl_song_ry")[0], "span", "snl_song_ry", "div", {event:"mouseover"});
	t7 = new Tab(Kg.$C("single_nav","single4")[0], "span", "single4", "div",{event:"mouseover"});	
	
	t8 = new Tab("tab3", "span", Kg.$C("hot_top_10")[0], "div",{event:"mouseover",callback:function(){
		var cidx = t8.currentIndex;
		var url = getHitBillUrl(cidx);
		Kg.$C("more","tab3")[0].href = url; 
	}});	
	t9 = new Tab("tab4", "span", Kg.$C("hot_top_10")[1], "div",{event:"mouseover",callback:function(){
		var cidx = t9.currentIndex;
		var url = getHotBillUrl(cidx);
		Kg.$C("more","tab4")[0].href = url; 
	}});	
	t10 = new Tab("tab5", "span", Kg.$C("party")[0], "div",{event:"mouseover",callback:function(){
		var cidx = t10.currentIndex;
		var url = getMusicUrl(cidx);
		Kg.$C("more","tab5")[0].href = url; 
	}});	
	t11 = new Tab(Kg.$C("top")[0], "span", Kg.$C("diy")[0], "div",{event:"mouseover",callback:function(){
		 var cidx = t11.currentIndex;
		 var url = getOriginalUrl(cidx);
		 Kg.$T("a", "top")[0].href = url; 
	}});
</script>
</body>
</html>

JS代码(Tab-min.js):

eval(function(p,a,c,k,e,r){
	e=function(c){
	return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if('0'.replace(0,e)==0){
	while(c--)r[e(c)]=k[c];
	k=[function(e){
	return r[e]||e}
];
	e=function(){
	return'([2-9a-fhjkm-rt-zA-SU-Z]|1\\w)'}
;
	c=1}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p}
('4 d(U,V,x,y,3){
	2.W(3);
	7 I=5.$(U),p=I.X,J=5.$(x),q=J.X;
	2.K=I;
	2.L=J;
	2.8=[];
	2.e=[];
	2.9=r;
	t(7 i=0,l=p.a;
	i<l;
	i++){
	b(p[i].Y==1&&p[i].Z.10()==V){
	2.8.11(p[i])}
}
t(7 i=0,l=q.a;
	i<l;
	i++){
	b(q[i].Y==1&&q[i].Z.10()==y){
	2.e.11(q[i])}
}
2.c=2.3.6==="12"?parseInt(Math.12()*2.8.a):2.3.6;
	t(7 i=0,l=2.e.a;
	i<l;
	i++){
	2.e[i].j.k="M"}
2.8[2.c].z+=" "+2.3.h;
	2.e[2.c].j.k="N";
	2.13()}
;
	d.m.W=4(3){
	2.3={
	A:"click",14:r,15:1,h:"h",O:16,6:0,17:P,B:1500,C:0,Q:r}
;
	5.extend(2.3,3||{
}
,16)}
;
	d.m.13=4(){
	7 9=r;
	t(7 i=0,l=2.8.a;
	i<l;
	i++){
	5.f(2.8[i],2.3.A,5.n(4(6){
	b(2.3.A=="u"&&2.3.C>0){
	7 18=2;
	9=setTimeout(4(){
	18.v(6)}
,2.3.C)}
else{
	2.v(6)}
}
,2,i));
	b(2.3.A=="u"&&2.3.C>0){
	5.f(2.8[i],"D",4(){
	clearTimeout(9)}
)}
}
b(2.3.17){
	2.E();
	5.f(2.K,"u",5.n(4(){
	w(2.9)}
,2));
	5.f(2.L,"u",5.n(4(){
	w(2.9)}
,2));
	5.f(2.K,"D",5.n(4(){
	2.E()}
,2));
	5.f(2.L,"D",5.n(4(){
	2.E()}
,2))}
}
;
	d.m.v=4(6){
	7 h=2.3.h;
	7 F=2.c;
	7 R=2.e[F];
	7 G=2.e[6];
	2.8[F].z=2.8[F].z.replace(new RegExp("\\\\s*"+h,"g"),"");
	2.8[6].z+=" "+h;
	R.j.k="M";
	G.j.k="N";
	b(2.3.14==="fade"){
	w(R.9);
	5.setOpacity(2.e[6],0);
	G.9=5.fadein(G,1,2.3.15)}
2.c=6;
	typeof(2.3.Q)=="4"&&2.3.Q()}
;
	d.m.E=4(){
	w(2.9);
	2.9=19(5.n(4(){
	2.1a()}
,2),2.3.B)}
;
	d.m.1a=4(){
	7 6=(2.c+1)>(2.8.a-1)?0:(2.c+1);
	b(2.3.O===P&&6===0){
	1b}
2.v(6)}
;
	d.m.prev=4(){
	7 6=(2.c-1)>=0?(2.c-1):(2.8.a-1);
	b(2.3.O===P&&6===2.8.a-1){
	1b}
2.v(6)}
;
	d.rotation=4(x,y,B){
	7 9=r;
	7 H=5.$(x);
	7 o=5.$T(y,H);
	7 6=0;
	5.f(H,"u",4(){
	w(9)}
);
	5.f(H,"D",4(){
	S()}
);
	4 S(){
	9=window.19(4(){
	t(7 i=0;
	i<o.a;
	i++){
	b(o[i].offsetHeight>0)6=i;
	o[i].j.k="M"}
7 1c=(6>=o.a-1)?0:6+1;
	o[1c].j.k="N"}
,B)}
S()}
',[],75,'||this|option|function|Kg|index|var|tabs|timer|length|if|currentIndex|Tab|contents|addEvent||current||style|display||prototype|bind|els|tabChild|contentChild|null||for|mouseover|change|clearInterval|contentId|contentTag|className|event|timeout|delay|mouseout|auto|curIndex|curCon|el|tabEl|contentEl|tabsFather|contentFather|none|block|loop|false|callback|lastCon|go||tabId|tabTag|setOption|childNodes|nodeType|tagName|toLowerCase|push|random|run|effect|fadeStep|true|autoPlay|_this|setInterval|next|return|num'.split('|'),0,{
}
))

CSS代码(main.css):

@charset "utf-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:12px/1.5 \5b8b\4f53,Arial,Verdana;color:#000;background:#fff;}
ul{list-style:none;}
button{border:0 none;padding:0;cursor:pointer;outline:0}
img{border:0;}
a{text-decoration:none;color:#000;outline:0}
.wrap{width:960px;margin:0 auto;}
.clear{clear:both;}
.clear_fix{zoom:1;}
.clear_fix:after{display:block;clear:both;content:".";visibility:hidden;height:0;font-size:0;}
/*index*/
.index a{color:#464646}
.banner{margin:12px auto 10px auto;width:700px;height:325px;}
#focus{width:694px;height:323px;border:1px solid #7a7a7a;margin-right:7px;overflow:hidden;position:relative}
#focus a{position:relative;zoom:1;}
#focus p{position:absolute;height:38px;line-height:38px;padding-left:15px;bottom:0;_bottom:-2px;left:0;color:#fff;font-size:13px;font-weight:bold}
#focus p span{float:left;}
#focus a:hover .text{text-decoration:underline;cursor:pointer}
#focus p .play{background:url(../images/banner_play.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/banner_play.png',sizingMethod='crop');width:33px;height:34px;margin-left:10px;display:inline;margin-top:2px;cursor:pointer;}
#focus s{position:absolute;height:38px;line-height:38px;width:100%;bottom:0;_bottom:-2px;left:0;filter:Alpha(Opacity=70);Opacity:0.7;background:#000;cursor:pointer}
#ctr{position:absolute;bottom:12px;_bottom:10px;right:17px;z-index:2;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:10px}
#ctr span{background:url(../images/doc.png?20121224) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/doc.png',sizingMethod='crop');text-align:center;width:12px;height:11px;float:left;margin-right:7px;cursor:pointer}
#ctr span.current{background:url(../images/doc_hover.png?20121224) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/doc_hover.png?20121224',sizingMethod='crop');}
.banner .download{width:257px;height:268px;position:relative;margin-bottom:5px}
.banner .download img{vertical-align:bottom;}
.banner .download a.link_img_down{background:url(../images/download_btn.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/download_btn.png',sizingMethod='crop');position:absolute;width:257px;height:47px;bottom:0;left:0;cursor:pointer}
.banner .download a.link_img_down:hover{background:url(../images/download_btn_hover.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/download_btn_hover.png',sizingMethod='crop');}

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