JS焦点图库 myFocus v2.0.4(支持xml ,修复bug)

猫性男孩

JS焦点图库 myFocus 正式版发布(4.17更新，增加"云"换肤、对JQ的支持等)myFocus自定义结构风格的应用:

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

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


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


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

之前已经发过一款myFocus-tab的html是基于ul-li 的并列结构形式：http://bbs.blueidea.com/thread-2999519-1-1.html
现在这款则是dl - dt - dd的单体结构形式，使用可能会更方便一些。
参数设置：
new myFocus.setting({
        id:'tab',//tab盒子id
        style:'mF_sd_tab2',//应用名称
        trigger:'mouseover',//切换模式，可选'click'
        type:'slide',//切换效果，可省略设置,默认'slide',可选'none'
        time:''//自动切换时间(秒)，可省略设置,默认为空(即不自动切换)
});

复制代码

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


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

3、mF_sd_tqq，仿腾讯微博轮换

这个应用非常简单，设置也很简单：
new myFocus.setting({
        id:'tqq',
        style:'mF_sd_tqq',
        time:3
});

复制代码

猫性男孩

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

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

更新日志：
------------------------------------------------------------------------------------------------------------------------
2012.10.30更新(v2.0.4)：
增加：
1、对xml配置文件的支持，可通过设置参数“xmlFile”引入xml文件；
2、添加onChange参数，可以自定义每次切换时执行的函数；

修正：
1、修正在谷歌中事件判断可能会出现的bug导致计时器重复执行；
2、修正风格css的loading z-index设置过低和透明导致掩盖不了图片的问题；
3、修正autoZoom在v2.0.3版本优化后导致某些情况不能缩放的bug；

详细：http://cosmissy.com/blog/post-34.html

2012.10.26更新(v2.0.3)：
1、解决IE9的兼容问题，所有风格完美支持IE9+（IE6~IE9）。
2、优化loading。
         优化程序loading机制，获得loading状态更准确；
         去掉loadIMGTimeout参数，增加loadingShow参数，可选true or false，即只有等或不等（图片加载完）两种选择；
         变更初始化的html/css结构，现在即使禁止js或加载js风格失败都保证页面不会变形（当然css文件必须手动加载或写入页面的css文件中）。
3、优化缩放居**能。
4、Failed to load提示优化，增加超时时间，错误不再弹出而是在myFocus的html内提示。
5、优化loading的z-index设置，避免可能遮住菜单的情况。
6、一些风格优化。
2012.6.12更新(v2.0.2)：
1、添加回了autoZoom功能，需要的同学可以更新了；
2、增加了一处判定：如果只有一张图片默认不滚动；
3、自动获址兼容了更多myfocus库文件的自定义命名格式，例如可以把库命名为myfocus.js/myfocus.xxx.js/myfocus-x.x.x.js等
2012.5.26更新(v2.0.1|推荐)：
1、修正了在一个页面引入多个风格可能引发参数(设置)重叠的bug；
2、优化了部分风格，例如mF_kdui,mF_peijianmall等；
3、增加了一个自定义风格mF_kendoui_sd；
4、demo及相关文档已全部完成更新(之前浏览过的建议清除浏览器缓存再进入)
2012.5.10更新(v2.0)：
比较杯具，之前是晚上1点多来更新日志，点保存才知道论坛服务器在维护，保存失败，在线写的东西。。。全没了。
现在只能再简单的补发一下

1、myFocus主库开发API部分仿照了JQ，增强代码的可读性及标准化，目的是希望可以涌现更多的myFocus开发者参与进来；
2、myFocus源代码全部重构及性能优化，尽量保证每一个方法代码性能都是最好的，代码健壮性也有所增强；
3、风格文件也全部重写与优化，部分增加了CSS 3的一些特性，例如圆角、CSS缓动等。需要注意的是新的风格文件与v1.2.4以下版本不相兼容。
2012.4.28更新(v2.0 beta)：
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文件构成（你可以理解“风格应用”文件相当于播放器的皮肤文件）。

在实际中如下引用：
<script type="text/javascript" src="js/myfocus-1.0.x.min.js"></script><!--首先引入myFocus库-->
<script type="text/javascript" src="js/pattern/mF_name.js"></script><!--引入风格应用js-->
<link rel="stylesheet" href="js/pattern/mF_name.css" /><!--引入风格应用css-->
复制代码
当引用好这些文件后，你就可以在网页中调用这个风格应用了：
myFocus.set({pattern:'mF_name'});//mF_name为风格应用的名称
复制代码