myFocus slide3D v1.1.0 使用方法与下载
更新时间：2011年01月12日 23:19:46 作者：
myFocus slide3D v1.1.0 使用方法与下载，需要的朋友可以参考下。
XHTML结构：
<div id="myFocus-wrap">
<div id="myFocus">
<!--焦点图盒子-->
<div class="loading">
<span>请稍候...</span></div>
<!--载入画面-->
<ul class="pic">
<!--内容列表-->
<li><a href="#">
<img src="images/index/focus1.jpg" alt="图片1" /></a></li>
<li><a href="#">
<img src="images/index/focus2.jpg" alt="图片2" /></a></li>
<li><a href="#">
<img src="images/index/focus3.jpg" alt="图片3" /></a></li>
<li><a href="#">
<img src="images/index/focus4.jpg" alt="图片4" /></a></li>
</ul>
</div>
</div>
引入myFocus版本js，引入js的时候注意次序，因为这跟页面加载js的次序有关：
<script src="js/flash/myfocus-1.0.4.full.js" type="text/javascript"></script>
<script src="js/flash/mF_slide3D.js" type="text/javascript"></script>
<link href="js/flash/mF_slide3D.css" rel="stylesheet" type="text/css" />
注：这里用到了slide3D效果 其他效果Demo可以查看官网：
http://www.cosmissy.com/myfocus/demo.html
Javascript：
<script type="text/javascript">
var mf = myFocus; //简称
var param = {
id: "myFocus",
pattern: "mF_slide3D",
time: 5, //切换时间间隔
trigger: 'click', //触发模式：click-点击 mouseover-悬停
width: 960 / 1, //区域宽度
height: 465 / 1, //区域高度
txtHeight: 0 / 1, //文字层高度(0为隐藏)
//txtWidth: 62 / 1, //为字段宽度(68-中等/82-较宽/32-较窄)
auto: true, //是否自动播放
wrap: false, //是否自带边框
index: 0 / 1, //开始显示的图片顺序(0表示第一张，不能大于总数)
delay: 100 / 1, //按钮悬停(mouseover)模式下的延迟时间，单位：毫秒（0-不延迟）
//额外参数
speed: 120, //运动速度(数字越大，速度越慢)
direction: 'left', //运动方向：left top right bottom
easing: 'easeInOut', //运动形式： easeOut-快出慢入 easeIn-慢出快入 easeInOut-慢出慢入 linear-匀速运动
less: 1, //是否无缝 1-是 0-否
//chip: 10, //图切片数量（能被图高整除才有效）（8/10/16）
type: 4, //切片效果：1-甩头 2-甩尾 3-凝乱 4-随机效果
gray: 0 / 1 //非当前图片是否变灰 1-是 0-否
}
myFocus.set(param, true);
//屏蔽IE执行误差
window.onerror = function () { return true };
</script>
其他效果与文档可以查看官网博客：
http://www.cosmissy.com/myfocus/demo.html
最新版本 myFocus all v1.1.0(2010.12.15更新)
演示地址:http://demo.jb51.net/js/myfocus/index.html
打包下载:https://www.jb51.net/jiaoben/33989.html
复制代码 代码如下:
<div id="myFocus-wrap">
<div id="myFocus">
<!--焦点图盒子-->
<div class="loading">
<span>请稍候...</span></div>
<!--载入画面-->
<ul class="pic">
<!--内容列表-->
<li><a href="#">
<img src="images/index/focus1.jpg" alt="图片1" /></a></li>
<li><a href="#">
<img src="images/index/focus2.jpg" alt="图片2" /></a></li>
<li><a href="#">
<img src="images/index/focus3.jpg" alt="图片3" /></a></li>
<li><a href="#">
<img src="images/index/focus4.jpg" alt="图片4" /></a></li>
</ul>
</div>
</div>
引入myFocus版本js，引入js的时候注意次序，因为这跟页面加载js的次序有关：
复制代码 代码如下:
<script src="js/flash/myfocus-1.0.4.full.js" type="text/javascript"></script>
<script src="js/flash/mF_slide3D.js" type="text/javascript"></script>
<link href="js/flash/mF_slide3D.css" rel="stylesheet" type="text/css" />
注：这里用到了slide3D效果 其他效果Demo可以查看官网：
http://www.cosmissy.com/myfocus/demo.html
Javascript：
复制代码 代码如下:
<script type="text/javascript">
var mf = myFocus; //简称
var param = {
id: "myFocus",
pattern: "mF_slide3D",
time: 5, //切换时间间隔
trigger: 'click', //触发模式：click-点击 mouseover-悬停
width: 960 / 1, //区域宽度
height: 465 / 1, //区域高度
txtHeight: 0 / 1, //文字层高度(0为隐藏)
//txtWidth: 62 / 1, //为字段宽度(68-中等/82-较宽/32-较窄)
auto: true, //是否自动播放
wrap: false, //是否自带边框
index: 0 / 1, //开始显示的图片顺序(0表示第一张，不能大于总数)
delay: 100 / 1, //按钮悬停(mouseover)模式下的延迟时间，单位：毫秒（0-不延迟）
//额外参数
speed: 120, //运动速度(数字越大，速度越慢)
direction: 'left', //运动方向：left top right bottom
easing: 'easeInOut', //运动形式： easeOut-快出慢入 easeIn-慢出快入 easeInOut-慢出慢入 linear-匀速运动
less: 1, //是否无缝 1-是 0-否
//chip: 10, //图切片数量（能被图高整除才有效）（8/10/16）
type: 4, //切片效果：1-甩头 2-甩尾 3-凝乱 4-随机效果
gray: 0 / 1 //非当前图片是否变灰 1-是 0-否
}
myFocus.set(param, true);
//屏蔽IE执行误差
window.onerror = function () { return true };
</script>
其他效果与文档可以查看官网博客：
http://www.cosmissy.com/myfocus/demo.html
最新版本 myFocus all v1.1.0(2010.12.15更新)
演示地址:http://demo.jb51.net/js/myfocus/index.html
打包下载:https://www.jb51.net/jiaoben/33989.html
相关文章
这篇文章主要介绍了Bootstrap Validator 表单验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要为大家介绍了javascrip高级前端开发中常用的几个API示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2021-11-11
这篇文章主要介绍了滑动翻页效果实现和移动端click事件问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了javascript解析json的方法,以实例形式详细讲述了javascript的json库用法,需要的朋友可以参考下2014-11-11
微信小程序有时需要函数里面调用函数,下面这篇文章主要给大家介绍了关于微信小程序创建自定义全局函数以及其调用方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章介绍了JS文本框追加多个下拉框的值的例子，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了js函数和this用法,结合实例形式分析了js函数和this基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了微信小程序全局变量GLOBALDATA的定义和调用过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
下面小编就为大家带来一篇JavaScript代码性能优化总结(推荐)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦2016-05-05
这篇文章主要为大家展示了bootstrap多种样式进度条，默认进度条、条纹进度条等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论