标签：style http color java 使用 文件 代码 html
焦点图分有：flash焦点图 js焦点图 css焦点图 jQ焦点图（其中jQ焦点图以代码量少，实现功能成为首选）；
myFocus是一款专注于焦点图制作的js插件；
使用步骤：点击下载——Demo显示打包下载——点击 下载的链接——下载
注：在引用myFocus插件时只需要把下载后myFocus的整个js文件复制到自己的站点的js里即可；
js部分：
<script type="js/myfocus-2.0.1.min.js" type="text/javascript"></script> //引用myfocus插件库
<script type="js/mf-pattern/mF-YSlider.js" type="text/javascript"></script> //引入myfocus插件中所需的js效果
<link href="js/mf-pattern/mF-YSlider.css" type="text/css" rel="stylesheet"/> //引入myfocus插件中所需的css样式
<script type="text/javascript">
myFocus.set({
id:‘picBox‘ //焦点图初始化，其Id名要与图片列表最外层的Id一致
});
</script>
CSS部分:暂时不写
html部分：
<div class="ad" id="picBox">
<div class="loading"><img src="images/loading.gif" alt="图片加载中"/></div> //显示加载过程
<div class="pic"> //为实现焦点图的切换效果，图片列表外面必须要包裹一个class为pic的div
<ul>
<li><img src="images/ad1.jpg"/></li>
<li><img src="images/ad2.jpg"/></li>
<li><img src="images/ad3.jpg"/></li>
</ul>
</div>
</div>
更多关于myFocus插件的使用到：http://demo.jb51.net/myfocus/tutorials.html
如何使用myFocus插件制作焦点图效果,布布扣,bubuko.com
标签：style http color java 使用 文件 代码 html
原文地址：http://www.cnblogs.com/hsp09/p/3889540.html
