fzkdhotel/obj/Release/Package/PackageTmp/temp/js/myfocus/自定义风格/qqyue/demo.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!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 - QQ音乐</title>
<style type="text/css">
body { background:#fff; padding:20px; }
/*=========mF_sd_qqyue========*/
.mF_sd_qqyue{border:1px solid #999;}
.mF_sd_qqyue .pic li{width:100%;height:100%;overflow:hidden;position:absolute;display:none;}
.mF_sd_qqyue .txt{position:absolute;z-index:2;right:0;*right:-1px;top:0;height:100%;border-left:1px solid #999;overflow:hidden;}
.mF_sd_qqyue .txt li{line-height:18px;border-bottom:1px solid #999;float:left;position:relative;background:#f4f4f4;cursor:pointer;}
.mF_sd_qqyue .txt li a{position:relative;z-index:1;display:block;height:18px;overflow:hidden;margin-top:12px;font:bold 14px/18px '宋体';color:#666;padding:0 10px 0 30px;text-decoration:none;}/*标题*/
.mF_sd_qqyue .txt li p{position:relative;z-index:1;color:#888;padding-left:30px;}
.mF_sd_qqyue .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:url(img/btn.gif) right bottom no-repeat;}
.mF_sd_qqyue .txt li.current{background:url(img/btn-bg.png) left center no-repeat;}
.mF_sd_qqyue .txt li.current a{color:#f60;}
.mF_sd_qqyue .txt li.current p{color:#333;}
.mF_sd_qqyue .par{position:absolute;left:12px;bottom:10px;}
.mF_sd_qqyue .par li{float:left;display:none;height:60px;position:relative;overflow:hidden;}
.mF_sd_qqyue .par li p{position:relative;z-index:1;color:#fff;padding:10px;text-indent:2em;line-height:20px;}
.mF_sd_qqyue .par li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}
</style>
<script type="text/javascript" src="http://myfocus-js.googlecode.com/svn/trunk/myfocus-2.0.0.min.js"></script>
<script type="text/javascript">
/*
* mF_qqyue_sd(自定义myFocus风格)
* 支持myFocus v2.0以上版本
*/
myFocus.pattern.extend({
	'mF_sd_qqyue':function(settings,$){
		var $focus=$(settings);
		var $picList=$focus.find('.pic li');
		var $txtList=$focus.addListTxt().find('li');
		var $parList=$focus.find('.par li');
		//CSS
		var w=settings.width,h=settings.height,n=$txtList.length;
		$focus[0].style.width=w*16/11+1+'px';
		$focus.find('.txt')[0].style.width=w*5/11+'px';
		$focus.find('.par')[0].style.width=w-12*2+'px';
		$txtList.each(function(){this.style.cssText='width:'+(w*5/11+2)+'px;height:'+(h-n+4)/n+'px;'});
		//PLAY
		$focus.play(function(i){
			$picList[i].style.display=$parList[i].style.display='none';
			$txtList[i].className='';
		},function(i){
			$picList.eq(i).fadeIn();
			$txtList[i].className='current';
			$parList[i].style.display='block';
		});
		//Control
		$focus.bindControl($txtList);
	}
});
//实例化
myFocus.set({
	id:'qqyue',//ID
	pattern:'mF_sd_qqyue',//风格样式
	time:3,//切换时间间隔(秒)
	trigger:'click',//触发切换模式：'click'(点击)/'mouseover'(悬停)