开启左侧

[CSS] JS焦点图库 myFocus 正式版发布(v1.2.4,修正部分bug,支持手动

[复制链接]
发表于 2012-4-13 17:19:28 | 显示全部楼层 |阅读模式
经过了一系列的折腾和纠结,myFocus库现在总算可以发布了 smile.gif

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

更新日志(myFocus v1.2.4):
------------------------------------------------------------------------------------------------------------------------
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-->
  4. 复制代码
复制代码

当引用好这些文件后,你就可以在网页中调用这个风格应用了:
  1. myFocus.set({pattern:'mF_name'});//mF_name为风格应用的名称
  2. 复制代码
复制代码
上面是一个最简单的调用,使用简单调用的前提是这款风格的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. });
  10. 复制代码
复制代码
这样,各个参数都一目了然,维护也十分的方便。
另外,这个调用是可以放在网页任意位置的(当然必须在引用文件之后),而且是等图片加载完才执行,如果你不想等,那么可以设置直接执行,只需参数最后多个一个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);
  10. 复制代码
复制代码
注意:这样设置的话就必须放在焦点图的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>
  11. 复制代码
复制代码
注:
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/
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:19:31 | 显示全部楼层
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/

例如引用库文件是:

欢迎大家意见反馈,本贴会不定期更新。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:19:32 | 显示全部楼层
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. });
  8. 复制代码
复制代码
另外当用到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">//设置实例1function step1(){myFocus.set({ id:'tab', pattern:'mF_sd_tab2', trigger:'mouseover'});}//设置实例2function 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. });
  6. 复制代码
复制代码
<!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">
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:19:34 | 显示全部楼层
<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>
运行代码复制代码另存代码 提示:您可以先修改部分代码再运行
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:19:37 | 显示全部楼层
怎么也的支持LZ。。关注这么久了。。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:19:40 | 显示全部楼层
currentstyle为空或不是对象???
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:19:44 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:19:46 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:19:50 | 显示全部楼层
在IE6/7/8/choroe/ff都测试,应没什么问题
当然这demo工程量其实蛮大的涉及到很多文件,可能会有一些疏漏,会后续跟进^^
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:19:52 | 显示全部楼层
新手学习。。 biggrin.gif
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表