找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5148|回复: 2

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

[复制链接]
发表于 2013-2-23 19:05:55 | 显示全部楼层 |阅读模式 来自 北京市
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
});

复制代码

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

 楼主| 发表于 2013-2-23 19:07:48 | 显示全部楼层 来自 北京市

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

经过了一系列的折腾和纠结,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为风格应用的名称
复制代码

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-3-29 01:54 , Processed in 0.047269 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表