找回密码
 注册

只需一步,快速开始

蓝色理想 最新研发动态 新增登录提醒插件 - 用至我的站点 地图任务一定要做 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

MIUI手机主题设计大赛,奔驰大奖等你拿! 想加薪?!蓝色理想招聘提供你更多机会 悬赏答疑,赚取积分兑奖品!

查看: 51381|回复: 291

JS焦点图库 myFocus v2.0 beta发布(彻底重构,全新API,全新特性)  [复制链接]

KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 14:20:11 |显示全部楼层
本帖最后由 KOEN301 于 2012-4-28 21:52 编辑

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

详细Demohttp://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 编辑 ]
已有 1 人评分威望 收起 理由
sunritz + 2 看上去是一个很完善的作品

总评分: 威望 + 2   查看全部评分

My Blog : http://cosmissy.com/blog
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 14:24:27 |显示全部楼层

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的单体结构形式,使用可能会更方便一些。
参数设置:
  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所示

 提示:您可以先修改部分代码再运行


3、mF_sd_tqq,仿腾讯微博轮换

这个应用非常简单,设置也很简单:
  1. new myFocus.setting({
  2.         id:'tqq',
  3.         style:'mF_sd_tqq',
  4.         time:3
  5. });
复制代码

 提示:您可以先修改部分代码再运行


[ 本帖最后由 KOEN301 于 2011-4-17 09:25 编辑 ]
My Blog : http://cosmissy.com/blog
帖子
735
体力
2241
威望
0
发表于 2010-11-29 14:45:41 |显示全部楼层
怎么也的支持LZ。。关注这么久了。。
帖子
98
体力
618
威望
0
发表于 2010-11-29 14:48:57 |显示全部楼层
currentstyle为空或不是对象???

天空飞扬的柳絮

高级会员

帖子
190
体力
633
威望
10
发表于 2010-11-29 14:49:13 |显示全部楼层
灰常感谢楼主的无私奉献!
帖子
1
体力
17
威望
0
发表于 2010-11-29 14:54:22 |显示全部楼层

chorme 与FF下看不到

楼主有在不通浏览器下测试过吗?我在FF下根本不出来
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 14:59:17 |显示全部楼层
在IE6/7/8/choroe/ff都测试,应没什么问题
当然这demo工程量其实蛮大的涉及到很多文件,可能会有一些疏漏,会后续跟进^^
My Blog : http://cosmissy.com/blog
帖子
18
体力
97
威望
0
居住地
湖北省 襄樊市
发表于 2010-11-29 15:10:14 |显示全部楼层
新手学习。。
帖子
32
体力
156
威望
0
发表于 2010-11-29 15:12:38 |显示全部楼层
支持,缩图可否放右边?
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 15:20:32 |显示全部楼层
不止一款风格呀~~~

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

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


[ 本帖最后由 KOEN301 于 2010-11-29 15:22 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
My Blog : http://cosmissy.com/blog
帖子
98
体力
618
威望
0
发表于 2010-11-29 16:12:33 |显示全部楼层
太厉害了,顶
帖子
3120
体力
2682
威望
4
发表于 2010-11-29 16:48:21 |显示全部楼层
非常好,之前就有下載樓主的一個版本,現在出多種風格的了,太棒了,謝謝~~強力支持
帖子
7
体力
25
威望
0
居住地
广东省 深圳市
发表于 2010-11-29 17:09:11 |显示全部楼层
太好了,非常全面
帖子
194
体力
442
威望
0
居住地
亚洲 韩国
发表于 2010-11-29 17:38:29 |显示全部楼层
非常好,一网打尽了。
提示楼主:demo里缺演示图。
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 18:53:10 |显示全部楼层

回复 14# yamanyin 的帖子

呵呵,谢谢提醒~~
下载已经更新
My Blog : http://cosmissy.com/blog
帖子
193
体力
517
威望
0
居住地
辽宁省 朝阳市
发表于 2010-11-29 19:11:01 |显示全部楼层
有解决天女散花的问题吗?
帖子
3120
体力
2682
威望
4
发表于 2010-11-29 21:11:21 |显示全部楼层

 提示:您可以先修改部分代码再运行



请问一下为什么我用这样,图一直出不来,一直在loading,
而且提示"window.attachEvent('onload',function(){myFocus[par.style](par)});"这里出错。
我把这句删掉,IE没有错误提示了,不过还是一直loading
请教是哪里写错了吗?我什么都没有改啊
帖子
46
体力
101
威望
0
发表于 2010-11-29 21:48:50 |显示全部楼层
强大啊..不错..收了..
53115.cn
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 22:28:31 |显示全部楼层
原帖由 泥巴巴 于 2010-11-29 21:11 发表

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

 提示:您可以先修改部分代码再运行

My Blog : http://cosmissy.com/blog
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 22:34:40 |显示全部楼层
原帖由 wouivkyi 于 2010-11-29 19:11 发表
有解决天女散花的问题吗?

这个问题之前已经回复,提前人工加class可以有效的防止这类的问题
更保险一点的话就是在焦点图的盒子div中直接加固定的大小,再设置overflow:hidden;
My Blog : http://cosmissy.com/blog
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-29 23:11:50 |显示全部楼层
再说明一下,为焦点图盒子提前加class或style属性都是实际应用中推荐的做法
1楼demo还有myFocus其他的demo没有加是因为对它来说,要应用哪款风格class是未知的(至少在设计中是这样),所以不加,而实际应用中却不会出现这样的情况

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

再次谢谢大家的支持
My Blog : http://cosmissy.com/blog

啄米鸟

银牌会员  

帖子
414
体力
1537
威望
10
居住地
浙江省 杭州市
发表于 2010-11-30 08:48:44 |显示全部楼层
众里寻它千百度啊,感谢楼主。收藏。
帖子
144
体力
623
威望
0
居住地
浙江省 温州市
发表于 2010-11-30 10:31:30 |显示全部楼层
好丰富的样式可供选择,感谢楼主!!!
帖子
16
体力
161
威望
0
居住地
河南省 郑州市
发表于 2010-11-30 11:05:20 |显示全部楼层
长期潜水的我看到此贴不得不顶
3mzn.com
帖子
326
体力
857
威望
0
居住地
安徽省 合肥市
发表于 2010-11-30 11:45:19 |显示全部楼层
呵呵  终于见到正式版了。。  收藏了。 以后省事了。。  3Q
Mr.Kin
KOEN301 楼主
帖子
454
体力
1059
威望
9
居住地
广东省 广州市
发表于 2010-11-30 13:08:35 |显示全部楼层
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
My Blog : http://cosmissy.com/blog
帖子
130
体力
491
威望
0
居住地
广东省 广州市
发表于 2010-11-30 13:40:40 |显示全部楼层
很久之前用過,那時候只有一種效果,現在多了,立即試試,等會再評價吧。。。
改就一個字
帖子
841
体力
988
威望
0
发表于 2010-11-30 14:42:12 |显示全部楼层
早就拿来用了。。。先谢过。
帖子
8
体力
28
威望
0
发表于 2010-11-30 17:30:11 |显示全部楼层
好丰富的样式可供选择,感谢楼主!!!
帖子
38
体力
90
威望
0
发表于 2010-12-1 14:20:15 |显示全部楼层

感谢楼主辛苦劳动

感谢楼主辛苦劳动,做出这出这么好的东东,但还要改进啊,页面加载时有错误发生,ie左下角出现黄黄的标识,希望再作修改,毕竟用起来有错误不爽。没错误,我就用,呵呵。。
您需要登录后才可以回帖 登录 | 注册


Archiver|手机版|blueidea.com ( 京ICP备05002321号 )    

GMT+8, 2012-5-22 17:56 , Processed in 0.167537 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部