首页 > 代码库 > myFocus库和风格使用说明
myFocus库和风格使用说明
myFocus库和风格使用说明
只需简单3步：
Step 1、在html的<head>标签内引入myFocus库和风格应用文件
<script type="text/javascript" src="http://www.mamicode.com/myfocus-1.0.4.min.js"></script><!--首先引入myFocus库-->
<script type="text/javascript" src="http://www.mamicode.com/pattern/mF_name.js"></script><!--引入风格应用js-->
<link rel="stylesheet" href="http://www.mamicode.com/pattern/mF_name.css" /><!--引入风格应用css-->
(为了使用方便，myFocus库文件和风格应用文件都已托管在谷歌code，大家可以直接引入使用)
Step 2、创建标准的(myFocus)html结构，并填充你的内容(tip1:例子li数为5，实际可随意增减，但至少为2)
<div id="boxID"><!--焦点图盒子-->
<div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
<ul class="pic"><!--内容列表-->
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
</ul>
</div>
Step 3、在step1代码之后的任意一个位置调用(建议在<head>标签结束前调用) //你可以简单参数调用：
//你可以简单参数调用：
<script type="text/javascript">
myFocus.set({
id:‘boxID‘,//焦点图盒子ID
pattern:‘mF_name‘,//风格应用的名称
time:3,//切换时间间隔(秒)，省略设置即不自动切换
width:450,//设置宽度(主图区)
height:296//设置高度(主图区)
});
</script>
//或详细一点的参数调用(推荐)：
<script type="text/javascript">
myFocus.set({
id:‘boxID‘,//焦点图盒子ID
pattern:‘mF_name‘,//风格应用的名称
time:3,//切换时间间隔(秒)，省略设置即不自动切换
trigger:‘click‘,//触发切换模式:‘click‘(点击)/‘mouseover‘(悬停)，默认‘click‘
width:450,//设置宽度(主图区)
height:296,//设置高度(主图区)
txtHeight:‘default‘//文字层高度设置,‘default‘为默认高度，0为隐藏，默认‘default‘
});
</script>
有关myFocus焦点图的名称解释
1、关于风格应用：
所有的风格应用包含两个文件，一个为js，一个为css，你可以下载更多的风格应用，再引入到你的html文件中使用即可；
风格应用文件的名称一般为mF_name；mF表示myFocus，name当然是这风格应用的名字；
带略缩图的为：mF_name_tb；后面的tb表示略缩图；
自定义结构的为：mF_sd_name；其中sd表示自定义结构；
2、关于标准html结构中img标签的属性定义
src是大图地址；(这还用说吗- -||..)
thumb是小图(即略缩图地址，留空即把大图当作小图地址)；
alt是显示的标题文字
text是的更详细的描述文字
内容列表中li的数目(即焦点图的图片数)可随意增删。
»使用中可能会遇到的问题
1.myFocus兼容性如何？可以免费使用吗？ myFocus兼容目前所有的主流浏览器，包括IE6+,FF3.5+,Chrome5.0+等，而且在各个浏览器中的表现效果保持一致。 myFocus在保留基本著作信息的前提下可以免费任意使用。
2.打开焦点图瞬间它撑大了页面造成体验不好，原因？怎么修正？ 撑大页面的原因主要是网络上存在延迟 & IE的代码执行延迟，导致它没有及时的应用上正确的样式。解决方法有3个： 一是在焦点图的div手动加上对应风格的class，例如应用的风格是mF_taobao2010，那么对应加：
<div id="myFocus" class="mF_taobao2010">....</div>；
另外一个是在它的div直接加style样式，例如：
<div id="myFocus" style="width:..px;height:..px;overflow:hidden;">....</div>
最后一个是从根本上解决代码的执行延迟，因为myFocus常规情况下是等页面onload/加载完所有图片才执行风格代码，但页面元素过多内容庞大时，这种等待有点浪费，可以选择让它立即执行，只需在调用参数后面多加一个true参数即可：myFocus.set({你的参数设置},true)；但需要注意的是这样的调用只能放在myFocus的div结构之后，在复杂的页面上应用myFocus时推荐这样的做法。
3.myFocus使用GB2312编码不行？一定要用utf-8吗？
myFocus文件默认是utf-8格式，在GB2312编码的网页上使用按情况需要加charset="utf-8"
例如：<script type="text/javascript" src="http://www.mamicode.com/xxx.js" charset="utf-8"></script>
另一种解决方法是把js文件保存为gb2312编码(windows记事本默认的保存格式)。