myFocus.js——焦点图
2016-09-02 11:40
169 查看
myFocus兼容目前所有的主流浏览器,包括IE6+,FF3.5+,Chrome5.0+等
JS引用:
<script type="text/javascript" src="js/myfocus-2.0.0.min.js"></script> <!--引入myFocus库--> <script type="text/javascript" src="js/mf-pattern/slide3D.js"></script> <!--引入风格js文件--> <link href="js/mf-pattern/slide3D.css" type="text/css" /> <!--引入风格css文件-->
提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。那么风格文件是如何自动引入的?详情请看myFocus的文件结构与自动引入风格文件机制。
HTML:
<div id="boxID"> <!--焦点图盒子--> <div class="loading"> <img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)--> <div class="pic"><!--内容列表(li数目可随意增减)--> <ul> <li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li> <li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li> <li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li> <li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li> <li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li> </ul> </div> </div>
IMG标签的属性说明:
src : 图片地址;
thumb : 图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址);
alt : 图片的描述文字;
text : 图片更详细的描述文字(需要风格支持,可以省略)
js调用(建议在head标签结束前调用)
//你可以简单的调用---只设置它的盒子id,其它参数全部默认设置: <script type="text/javascript"> myFocus.set({id:'boxID'}); </script> //或详细一点的参数调用: <script type="text/javascript"> myFocus.set({ id:'boxID', //焦点图盒子ID pattern:'mF_fancy',//风格应用的名称 time:3, //切换时间间隔(秒) trigger:'click', //触发切换模式:'click'(点击)/'mouseover'(悬停) width:450, //设置图片区域宽度(像素) height:296, //设置图片区域高度(像素) txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏 }); </script> //更多参数设置及jQuery方式调用请查看使用者API。
Tip:使用中可能会遇到的问题
1.打开焦点图瞬间它撑大了页面造成体验不好,原因?怎么修正?
撑大页面的原因主要是网络上存在延迟 & 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时推荐这样的做法。
官网及API:http://demo.jb51.net/js/myfocus/tutorials.html
相关文章推荐
- 最简单的图片轮播--利用myfocus js焦点图库插件
- 强大的js焦点图插件myFocus.js
- JavaScript(js)设置默认输入焦点(focus)
- 使用JS取得焦点(focus)元素
- JavaScript(js)设置输入焦点(focus)
- 使用JS取得焦点(focus)元素
- JS实现文本框和文本域获取焦点focus()时,光标在本文的末尾
- jq获得焦点focus,失去焦点blur,change()函数,js的onfocus,onblur,onchange()方法
- 使用JS取得焦点(focus)元素
- JavaScript(js)设置默认输入焦点(focus)
- 使用JS取得焦点(focus)元素代码
- 根据验证结果js设置输入焦点(focus)
- Vue.js 里面有没有 focus 这样自动获焦点?
- ext-js当用blur()和focus()来控制焦点
- 使用JS取得焦点(focus)元素代码
- JavaScript(js)设置默认输入焦点(focus)
- Android Share My Custom View Widget ------ RenderFocusView 点击焦点渲染控件(水波纹)
- MY 总结:js return true,return false
- MY 总结:理解js中的:Null、undefined、""、0、false
- 一个小型js框架myJSFrame附API使用帮助