JS焦点图库 myFocus v2.0 beta发布(彻底重构，全新API，全新特性)

KOEN301 楼主

经过了一系列的折腾和纠结，myFocus库现在总算可以发布了

详细Demo：http://www.cosmissy.com/myfocus/demo.html（页面内提供完整打包下载）

更新日志(myFocus v2.0.0 beta)：
------------------------------------------------------------------------------------------------------------------------
2012.4.28更新：
1、彻底重构，全新API(开发部分)，全新特性；
2、修正所有目前已发现的bug和不合理性，感谢网友的反馈和建议^^；
3、时间有限，详细日志请稍候。。。
demo下载：http://myfocus-js.googlecode.com/files/demo%20v2.rar
2011.7.20更新：
1、修正autoZoom设置为true时大图有时加载不了的bug；
2、更改autoZoom缩放方式，统一适应图片区域大小(即小图也会被放大以适应焦点图)；
3、支持手动引入pattern文件，path参数设置为false或0即禁止程序自动引入；
4、更新了下载包
2011.6.23更新：
1、修正autoZoom在IE中的一些bug；
2、path路径默认改为'http://www.cosmissy.com/myfocus/js/pattern/'；
2、修正风格'mF_fscreen_tb'某些情况文字显示bug；
3、添加最新版demo打包下载
2011.6.22更新：
1、重做autoZoom图片自动缩放功能，现在是大图按比例缩小并居中显示
2、去掉变量冲突的弹出窗口
2011.6.14更新：
1、修正了一处正则的小错误(li标签内的<img>不能换行)；
2、改进了set函数中callback调用的方便性，现在可以更方便的设置焦点图自定义事件；
3、增加autoZoom参数，支持设置图片自适应缩放；
4、修正min版本错误问题（包括1.2.0）；
5、使用说明页面提供简单示例下载；
2011.4.17更新：
1、增加"云"换肤功能，现在不再需要引入风格皮肤相关文件。相关原理见使用说明；
2、添加对焦点图片加载的判断与控制，现在可以更准确的判断焦点图片加载（而不是整个页面图片加载）的完成状态，同时支持更人性化的控制；
3、完善对加载前页面凌乱状态的控制；
4、更简单的调用设置，现在可以忽略除了id的所有参数；
5、防'myFocus'命名冲突的支持，支持内置myFocus别名；
6、新增对jQuery的支持。
12.15更新：
1、改进了animate函数的算法，现在可以保证在各个浏览器中的运动速度保持一致(为了验证，在mF_ladyQ风格里添加了时间条(倒计时)，大家可以在各个浏览器中测试下)。
2、添加了2个子类---pattern和easing，开发/使用者可以在这两个类中扩展更多的风格和缓动效果。
3、增强了mF_YSlider风格，切出方向现在可以选择为随机(参考了妙趣课堂老师的某个示例^^)。
4、改进了mF_ladyQ风格的淡出效果，更加动感。
5、增加了一款mF_kiki翻牌效果的风格。
6、其他风格应用一些小细节的更改。
7、增加了myFocus的缓动插件myFocus Easing v1.0(请到demo页面中的下载栏目下载)
12.9更新：
1、调整了部分API和源库代码，为求更简洁，库升级为v1.0.4。
2、自定义风格/说明文档/下载包的更新，并支持最新版本(v1.0.4)
详细(部分)：
·原来的调用new myFocus.setting(param)更改为接近原来的：myFocus.set(param)；
·param中的参数style更改为pattern，style文件目录也更改为pattern目录，主要是避免与常见css目录style发生混乱。
12.7更新：
1、myFocus库部分代码完善(v1.0.2)
2、修正绚丽风格mF_liquid在IE6中的hack，现在在IE6中显示更完美
3、使用说明和下载的更新
12.3更新：
为demo页面添加了更为详细的使用说明，下载等。
12.2更新：
修正demo中IE的错误提示，增加了一款风格应用：mF_slide3D(感谢cenanhongru)，演示见demo，风格应用选择mF_slide3D即可。
------------------------------------------------------------------------------------------------------------------------

1、关于myFocus（以下所有文字无更新，推荐观看demo页面中的说明）

myFocus是一个专注于焦点图/轮换图制作的JS库(或是叫工具集比较合适?)，它小巧而且是完全独立的JS库，大概是6~7KB左右的大小(min版)，用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图)，而且制作出的焦点图体积也非常的小(1KB左右)，功能也十分的完备，因为是轻量级，其运行效率也比常见的焦点图要高点，最重要的一点是，用myFocus制作出的焦点图使用十分的简单方便，而且每个焦点图的接口/结构都是通用的，这样，只用1~2秒时间就给网站换不同风格的焦点图成为了可能。

myFocus的宗旨：让网站应用焦点图就如播放器应用皮肤一样简单和随意。

2、如何使用

一般来说，myFocus焦点图包含2部分：myFocus库、风格应用。
其中每个风格应用由一个js文件和一个css文件构成（你可以理解“风格应用”文件相当于播放器的皮肤文件）。

在实际中如下引用：

1. <script type="text/javascript" src="js/myfocus-1.0.x.min.js"></script><!--首先引入myFocus库-->
   
2. <script type="text/javascript" src="js/pattern/mF_name.js"></script><!--引入风格应用js-->
   
3. <link rel="stylesheet" href="js/pattern/mF_name.css" /><!--引入风格应用css-->

复制代码

当引用好这些文件后，你就可以在网页中调用这个风格应用了：

1. myFocus.set({pattern:'mF_name'});//mF_name为风格应用的名称

复制代码

上面是一个最简单的调用，使用简单调用的前提是这款风格的js文件里必须预设默认值，而在实际中，myFocus提倡这样调用：

1. myFocus.set({
   
2.         id:'boxID',//焦点图盒子ID
   
3.         pattern:'mF_name',//风格应用的名称
   
4.         time:3,//切换时间间隔(秒)
   
5.         trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
   
6.         width:450,//设置宽度(主图区)
   
7.         height:296,//设置高度(主图区)
   
8.         txtHeight:'default'//文字层高度设置,'default'为默认高度，0为隐藏
   
9. });

复制代码

这样，各个参数都一目了然，维护也十分的方便。
另外，这个调用是可以放在网页任意位置的(当然必须在引用文件之后)，而且是等图片加载完才执行，如果你不想等，那么可以设置直接执行，只需参数最后多个一个true(不推荐)：

1. myFocus.set({
   
2.         id:'boxID',//焦点图盒子ID
   
3.         pattern:'mF_name',//风格应用的名称
   
4.         time:3,//切换时间间隔(秒)
   
5.         trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
   
6.         width:450,//设置宽度(主图区)
   
7.         height:296,//设置高度(主图区)
   
8.         txtHeight:'default'//文字层高度设置,'default'为默认高度，0为隐藏
   
9. },true);

复制代码

注意：这样设置的话就必须放在焦点图的html结构后面执行。

3、关于myFocus的html结构

实际上，myFocus支持任意的html结构，但myFocus并不提倡这么做。这是因为，如果每款焦点图html结构不同，那么当使用的时候你也必须更改相应的html代码，如果它们差异很大的话那么更改起来那是相当繁琐的事（这也是目前网上所有焦点图的通病）。
那么myFocus是怎么处理不同的html结构的呢？
很简单：先制定一个标准的html结构，对那些不同的html结构和细节用JS生成，这样就可以解决那些因不同结构造成的通用性问题了。
myFocus的标准html结构如下：

1. <div id="myFocus"><!--焦点图盒子-->
   
2.   <div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
   
3.   <ul class="pic"><!--内容列表-->
   
4.         <li><a href="#"><img src="img/1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></a></li>
   
5.         <li><a href="#"><img src="img/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></a></li>
   
6.         <li><a href="#"><img src="img/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></a></li>
   
7.         <li><a href="#"><img src="img/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></a></li>
   
8.         <li><a href="#"><img src="img/5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></a></li>
   
9.   </ul>
   
10. </div>

复制代码

注：
src是大图地址；
thumb是小图(即略缩图地址，留空即把大图当作小图地址)；
alt是显示的标题文字
text是的更详细的描述文字
内容列表中li的数目(即焦点图的图片数)可随意增删。

你会发现，上面的这些已经包含了绝大部分焦点图的所有主要元素（按钮、前进/后退等是属于辅助元素），即myFocus的标准html结构就已经可以应付大部分的情况。
如果需要更复杂的应用？例如还需要一段比详细描述还要详细的文字段呢？那么你要用到自定义结构了（风格应用的名字为mF_sd_name,sd表示自定义结构），这是后话。

4、关于myFocus风格应用及名字说明

myFocus风格应用是独立的文件(相当于播放器的皮肤文件)，它包含一个js文件和一个css文件，上面demo已经提供了22款不同的风格应用，更多的风格应用会不定期更新提供下载，敬请关注本帖^^
风格应用的文件名称：
一般为：mF_name；mF表示myFocus，name当然是这风格应用的名字；
带略缩图的为：mF_name_tb；后面的tb表示略缩图；
自定义结构的为：mF_sd_name；其中sd表示自定义结构；

如果不是自定义结构，那么你每次更换不同风格的焦点图只需更改它的参数 pattern:'风格应用的名字' 即可；
如果是自定义结构，那么你不仅要更改pattern参数，而且你的html结构也必须跟着这款风格一致。

PS:上面demo中的所有风格应用都是标准结构，不同风格更换pattern参数即可应用；
自定义结构风格应用示例请见2楼。

另外，myFocus库代码已托管到googleCode，使用时大家可以直接引用google的地址，这样比较稳定一点

myFocus项目主页：http://code.google.com/p/myfocus-js/
myFocus库文件目录：http://myfocus-js.googlecode.com/svn/trunk/
标准风格应用文件目录：http://myfocus-js.googlecode.com/svn/trunk/pattern/
自定义风格应用文件目录：http://myfocus-js.googlecode.com/svn/trunk/pattern-sd/

例如引用库文件是：http://myfocus-js.googlecode.com/svn/trunk/myfocus-1.0.4.min.js

欢迎大家意见反馈，本贴会不定期更新。

[ 本帖最后由 KOEN301 于 2011-7-20 21:09 编辑 ]

KOEN301 楼主

myFocus自定义结构风格的应用:

1、mF_sd_qqyue , 国内娱乐门户常见的焦点图风格

由于此焦点图中除了标题、描述，还多了一大段文字，所以需要用到自定义结构风格，示例如下：

<!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; } </style> <script src="http://www.cosmissy.com/myfocus/js/myfocus-1.0.4.min.js" type="text/javascript"></script> <script src="http://www.cosmissy.com/myfocus/js/pattern-sd/mF_sd_qqyue.js" type="text/javascript"></script> <link href="http://www.cosmissy.com/myfocus/js/pattern-sd/mF_sd_qqyue.css" rel="stylesheet" /> <script type="text/javascript"> //实例化 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>论坛demo需刷新多一次才看到效果</h2> <div id="qqyue"><!--焦点图盒子--> <div class="loading"><span>请稍候...</span></div><!--载入画面--> <ul class="pic"><!--图片标题--> <li><a href="#"><img src="http://www.cosmissy.com/img/myfocus/1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/img/myfocus/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/img/myfocus/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/img/myfocus/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/img/myfocus/5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></a></li> </ul> <ul class="par"><!--图片段落--> <li><p>日前，1华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><span></span></li> <li><p>日前，2华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><span></span></li> <li><p>日前，3华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><span></span></li> <li><p>日前，4华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><span></span></li> <li><p>日前，5华谊兄弟旗下内地首支歌唱"美好生活"的男女组合牛奶咖啡发行了2010全新明黄色系概念大碟《给你点儿颜色》……</p><span></span></li> </ul> </div> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

2、mF_sd_tab2 , 高端的tab选项卡应用（支持复杂的tab内布局、支持嵌套）

之前已经发过一款myFocus-tab的html是基于ul-li 的并列结构形式：http://bbs.blueidea.com/thread-2999519-1-1.html
现在这款则是dl - dt - dd的单体结构形式，使用可能会更方便一些。
参数设置：

1. new myFocus.setting({
   
2.         id:'tab',//tab盒子id
   
3.         style:'mF_sd_tab2',//应用名称
   
4.         trigger:'mouseover',//切换模式，可选'click'
   
5.         type:'slide',//切换效果，可省略设置,默认'slide',可选'none'
   
6.         time:''//自动切换时间(秒)，可省略设置,默认为空(即不自动切换)
   
7. });

复制代码

另外当用到tab嵌套时要注意设置顺序，如下demo所示

<!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 tab2</title> <script src="http://www.cosmissy.com/myfocus/js/myfocus-1.0.4.min.js" type="text/javascript"></script> <script src="http://www.cosmissy.com/myfocus/js/pattern-sd/mF_sd_tab2.js" type="text/javascript"></script> <link href="http://www.cosmissy.com/myfocus/js/pattern-sd/mF_sd_tab2.css" rel="stylesheet" /> <style type="text/css"> body { background:#fff; padding:20px; } </style> <script type="text/javascript"> //设置实例1 function step1(){ myFocus.set({ id:'tab', pattern:'mF_sd_tab2', trigger:'mouseover' }); } //设置实例2 function step2(){ myFocus.set({ id:'in-tab', pattern:'mF_sd_tab2', trigger:'mouseover' }); } if(+[1,]){step1();step2();}//ff/ch执行顺序 else{step2();step1();}//IE执行顺序 </script> </head> <body> <h2>论坛demo需刷新多一次才看到效果</h2> <div id="tab" class="mf_sd_tab2"> <dl> <dt>标题1</dt> <dd> <span><img src="http://webpic.sgamer.com/News/Preview/2010-11-24F1FBB.jpg" /></span> <ul> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长要长要长要长要长要长要长标题要长要长要长要长要长要长要长要长要长要长要长要长要长要长要长要长</li> </ul> </dd> </dl> <dl> <dt>标题2</dt> <dd> <span><img src="http://webpic.sgamer.com/News/Preview/2010-11-24F1FBB.jpg" /></span> <ul> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> </ul> </dd> </dl> <dl> <dt>标题3</dt> <dd> <span><img src="http://webpic.sgamer.com/News/Preview/2010-11-24F1FBB.jpg" /></span> <ul> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> <li>标题要长要长要长要长要长要长</li> <li class="in-tab"> <div id="in-tab" class="in-tab"> <dl> <dt>in-tab1</dt> <dd>in-tab1</dd> </dl> <dl> <dt>in-tab2</dt> <dd>in-tab2</dd> </dl> </div> </li> </ul> </dd> </dl> </div> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

3、mF_sd_tqq，仿腾讯微博轮换

这个应用非常简单，设置也很简单：

1. new myFocus.setting({
   
2.         id:'tqq',
   
3.         style:'mF_sd_tqq',
   
4.         time:3
   
5. });

复制代码

<!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仿腾讯微博效果</title> <style type="text/css"> body { background:#fff; padding:20px; } </style> <script src="http://www.cosmissy.com/myfocus/js/myfocus-1.0.4.min.js" type="text/javascript"></script> <script src="http://www.cosmissy.com/myfocus/js/pattern-sd/mF_sd_tqq.js" type="text/javascript"></script> <link href="http://www.cosmissy.com/myfocus/js/pattern-sd/mF_sd_tqq.css" rel="stylesheet" /> <script type="text/javascript"> //实例化 myFocus.set({ id:'tqq', pattern:'mF_sd_tqq', time:3 }); </script> </head> <body> <h2>论坛demo需刷新多一次才看到效果</h2> <div id="tqq" class="mF_sd_tqq"> <ul class="msgs"> <li> <div class="img"><img src="http://www.cosmissy.com/myfocus/img/tqq/1.jpg" /></div> <div class="msg"> <p><strong>情天娃娃</strong>：快八点了，今天的工作暂告一段落，明天继续。肚子在咕咕叫了，是该补充能量的时候了。人是铁，饭是钢，一顿不吃饿得慌呀！</p> <p class="from">来自<span>iPhone</span></p> </div> </li> <li> <div class="img"><img src="http://www.cosmissy.com/myfocus/img/tqq/2.jpg" /></div> <div class="msg"> <p><strong>一沙一天堂</strong>：宝洁生活家的礼品收到了，一本杂志，好几种潘婷试用品，满满一盒。卓越快递给送来的。不错啊！</p> <p class="from">来自<span>网页</span></p> </div> </li> <li> <div class="img"><img src="http://www.cosmissy.com/myfocus/img/tqq/3.jpg" /></div> <div class="msg"> <p><strong>寒汕樰</strong>：“方丈，你到底什么时候娶我？”“师太，你我都是出家之人，岂能……”“如果你不娶我，我立马宰了这个牛鼻子老道！！”“MLGB，老贼尼！你敢动他，我跟你拼了！” ……………………………………</p> <p class="from">来自<span>QQ</span></p> </div> </li> <li> <div class="img"><img src="http://www.cosmissy.com/myfocus/img/tqq/4.jpg" /></div> <div class="msg"> <p><strong>聂小爱</strong>：如果再让我遇见你，我会把你拉到卧室，回手锁上门，疯狂地把你推倒床上，用被子蒙住头，张开我的手臂，摞起袖子告诉你：看，我的手表是夜光的！</p> <p class="from">来自<span>iPhone</span></p> </div> </li> <li> <div class="img"><img src="http://www.cosmissy.com/myfocus/img/tqq/50.jpg" /></div> <div class="msg"> <p><strong>這裡一定要填</strong>：大半夜还不睡觉的小艾~~</p> <p class="from">来自<span>QQ空间</span></p> </div> </li> </ul> </div> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 KOEN301 于 2011-4-17 09:25 编辑 ]

wangsdong

怎么也的支持LZ。。关注这么久了。。

haohan

currentstyle为空或不是对象？？？

yachuan520

灰常感谢楼主的无私奉献！

blueweiwei

楼主有在不通浏览器下测试过吗？我在FF下根本不出来

KOEN301 楼主

在IE6/7/8/choroe/ff都测试，应没什么问题
当然这demo工程量其实蛮大的涉及到很多文件，可能会有一些疏漏，会后续跟进^^

liuxin001

新手学习。。

lochen

支持,缩图可否放右边?

KOEN301 楼主

不止一款风格呀~~~

demo里面一共有21款不同的焦点图

mF_pithy_tb就是在右边的略缩图风格~


[ 本帖最后由 KOEN301 于 2010-11-29 15:22 编辑 ]

haohan

太厉害了，顶

泥巴巴

非常好，之前就有下載樓主的一個版本，現在出多種風格的了，太棒了，謝謝~~強力支持

lala1ha

太好了，非常全面

yamanyin

非常好，一网打尽了。
提示楼主：demo里缺演示图。

KOEN301 楼主

呵呵，谢谢提醒~~
下载已经更新

wouivkyi

有解决天女散花的问题吗？

泥巴巴

<!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 tab2</title> <script src="http://www.cosmissy.com/myfocus/js/myfocus-1.0.min.js" type="text/javascript"></script> <script src="http://www.cosmissy.com/myfocus/style-sd/mF_fscreen_tb.js" type="text/javascript"></script> <link href="http://www.cosmissy.com/myfocus/style-sd/mF_games_tb.css" rel="stylesheet" /> <style type="text/css"> body { background:#fff; padding:20px; } </style> <script type="text/javascript"> new myFocus.setting({ id:'myFocus',//焦点图盒子ID style:'mF_games_tb',//风格应用的名称 time:3,//切换时间间隔(秒) trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停) width:650,//设置宽度(主图区) height:500,//设置高度(主图区) }); </script> </head> <body> <div class="width950top8"> <div class="rem_710title"> <span class="caselist_7">相冊(25本)</span></a> </div> <div id="pho" class="photlist"> <a href="" title="返回上一頁">返回</a> |<a href="resume2.html" title="相薄">相薄</a>><a href="" title="$相薄的名字">$相薄的名字</a> </div> <div id="myFocus" class="mF_games_tb"> <div class="loading"><span>請稍候...</span></div> <ul class="pic"> <li><a href="#"><img src="images/model04.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model05.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model06.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model07.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model02.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model01.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> </ul> </div> </div></div> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

请问一下为什么我用这样，图一直出不来，一直在loading,
而且提示"window.attachEvent('onload',function(){myFocus[par.style](par)});"这里出错。
我把这句删掉，IE没有错误提示了，不过还是一直loading
请教是哪里写错了吗？我什么都没有改啊

q149072205

强大啊..不错..收了..

KOEN301 楼主

原帖由 泥巴巴 于 2010-11-29 21:11 发表

你引用风格样式的路径错了
是style目录而不是style-sd目录，那个是自定义结构风格的目录。。。

<!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 tab2</title> <script src="http://www.cosmissy.com/myfocus/js/myfocus-1.0.min.js" type="text/javascript"></script> <script src="http://www.cosmissy.com/myfocus/js/style/mF_games_tb.js" type="text/javascript"></script> <link href="http://www.cosmissy.com/myfocus/js/style/mF_games_tb.css" rel="stylesheet" /> <style type="text/css"> body { background:#fff; padding:20px; } </style> <script type="text/javascript"> new myFocus.setting({ id:'myFocus',//焦点图盒子ID style:'mF_games_tb',//风格应用的名称 time:3,//切换时间间隔(秒) trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停) width:650,//设置宽度(主图区) height:500//设置高度(主图区) }); </script> </head> <body> <div class="width950top8"> <div class="rem_710title"> <span class="caselist_7">相冊(25本)</span></a> </div> <div id="pho" class="photlist"> <a href="" title="返回上一頁">返回</a> |<a href="resume2.html" title="相薄">相薄</a>><a href="" title="$相薄的名字">$相薄的名字</a> </div> <div id="myFocus" class="mF_games_tb"> <div class="loading"><span>請稍候...</span></div> <ul class="pic"> <li><a href="#"><img src="images/model04.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model05.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model06.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model07.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model02.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> <li><a href="#"><img src="images/model01.jpg" thumb="" alt="照片1" text="照片的說明" /></a></li> </ul> </div> </div></div> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

KOEN301 楼主

原帖由 wouivkyi 于 2010-11-29 19:11 发表
有解决天女散花的问题吗？

这个问题之前已经回复，提前人工加class可以有效的防止这类的问题
更保险一点的话就是在焦点图的盒子div中直接加固定的大小，再设置overflow:hidden;

KOEN301 楼主

再说明一下，为焦点图盒子提前加class或style属性都是实际应用中推荐的做法
1楼demo还有myFocus其他的demo没有加是因为对它来说，要应用哪款风格class是未知的（至少在设计中是这样），所以不加，而实际应用中却不会出现这样的情况

比较兼容的做法是为焦点图的div设置style="dispay:none"，再让js控制显示（谢谢网友kin1987），如果大家习惯这样的做法，我会在下版本中给予支持

再次谢谢大家的支持

redsky1987

众里寻它千百度啊，感谢楼主。收藏。

porttix

好丰富的样式可供选择，感谢楼主！！！

xiaoye88

长期潜水的我看到此贴不得不顶

kin1987

呵呵  终于见到正式版了。。  收藏了。 以后省事了。。  3Q

KOEN301 楼主

myFocus库代码已托管到googleCode，使用时大家可以直接引用google的地址，这样比较稳定一点

myFocus项目主页：http://code.google.com/p/myfocus-js/
myFocus库文件目录：http://myfocus-js.googlecode.com/svn/trunk/
标准风格应用文件目录：http://myfocus-js.googlecode.com/svn/trunk/style/
自定义风格应用文件目录：http://myfocus-js.googlecode.com/svn/trunk/style-sd/

例如引用库文件是：http://myfocus-js.googlecode.com/svn/trunk/myfocus-1.0.min.js

kmvan

很久之前用過，那時候只有一種效果，現在多了，立即試試，等會再評價吧。。。

bluekee

早就拿来用了。。。先谢过。

wind1983822

好丰富的样式可供选择，感谢楼主！！！

weasle

感谢楼主辛苦劳动，做出这出这么好的东东，但还要改进啊，页面加载时有错误发生，ie左下角出现黄黄的标识，希望再作修改，毕竟用起来有错误不爽。没错误，我就用，呵呵。。