<!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'(悬停)
width:450,//设置宽度(主图区)
height:296,//设置高度(主图区)
txtHeight:'default'//文字层高度设置，'default'为默认高度，0为隐藏
});
</script>
</head>
<body>
<h2>mF_qqyue_sd(自定义myFocus风格)</h2>
<div id="qqyue"><!--焦点图盒子-->
<div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)-->
<ul class="pic"><!--图片标题-->
<li><a href="#"><img src="img/1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></a></li>
<li><a href="#"><img src="img/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></a></li>
<li><a href="#"><img src="img/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></a></li>
<li><a href="#"><img src="img/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></a></li>
<li><a href="#"><img src="img/5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></a></li>
</ul>
<ul class="par"><!--图片段落-->
<li><p>日前，1华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><b></b></li>
<li><p>日前，2华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><b></b></li>
<li><p>日前，3华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><b></b></li>
<li><p>日前，4华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><b></b></li>
<li><p>日前，5华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><b></b></li>
</ul>
</div>
</body>
</html>
myFocus Demo v2.0.1cj
5星 · 超过95%的资源 需积分: 10 127 浏览量
2015-08-08
17:56:04
上传
评论
收藏 1.07MB RAR 举报 
myFocus Demo v2.0.1cj （304个子文件） 
all-wcprops 6KB all-wcprops 3KB all-wcprops 1012B all-wcprops 677B all-wcprops 522B all-wcprops 430B all-wcprops 420B all-wcprops 325B all-wcprops 319B all-wcprops 304B all-wcprops 296B all-wcprops 208B all-wcprops 206B all-wcprops 202B all-wcprops 194B all-wcprops 190B all-wcprops 190B all-wcprops 186B all-wcprops 182B all-wcprops 182B all-wcprops 78B all-wcprops 77B mF_fancy.css 2KB mF_fscreen_tb.css 2KB mF_pithy_tb.css 2KB mF_slide3D.css 2KB mF_games_tb.css 2KB mF_kdui.css 1KB mF_tbhuabao.css 1KB mF_shutters.css 1KB mF_ladyQ.css 1KB mF_classicHB.css 1KB mF_classicHC.css 1KB mF_qiyi.css 1KB mF_kiki.css 1KB mF_rapoo.css 1KB mF_YSlider.css 1KB mF_liquid.css 1KB mF_taobao2010.css 1KB mF_sohusports.css 1KB mF_liuzg.css 1KB mF_expo2010.css 1KB mF_quwan.css 1KB mF_peijianmall.css 1KB mF_51xflash.css 1012B mF_pconline.css 966B mF_taobaomall.css 820B mF_dleung.css 803B mF_luluJQ.css 717B entries 9KB entries 5KB entries 2KB entries 1KB entries 888B entries 729B entries 722B entries 563B entries 559B entries 553B entries 553B entries 437B entries 436B entries 427B entries 394B entries 393B entries 391B entries 387B entries 387B entries 387B entries 386B entries 258B
loading.gif 7KB loading.gif 3KB loading.gif 3KB btn.gif 2KB play.gif 1KB btn-blue.gif 1KB btn-bg2.gif 666B btn-gray.gif 649B sh-btn.gif 346B turn.gif 316B ar-right.gif 202B ar-left.gif 193B tit-ar.gif 184B tit-ar.gif 184B btn-bg.gif 102B btn-red.gif 90B btn.gif 87B ar.gif 60B
demo.html 5KB demo.html 5KB demo.html 4KB demo.html 2KB demo.html 2KB
4a.jpg 83KB 4.jpg 71KB 1a.jpg 70KB 3a.jpg 65KB 2a.jpg 59KB 2.jpg 47KB共 304 条
- 1
- 2
- 3
- 4
资源评论
u0106176502015-12-06不错，可以用的
