myFocus slide3D v1.1.0 使用方法与下载


Posted in Javascript onJanuary 12, 2011

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.3water.com/js/myfocus/index.html
打包下载:https://3water.com/jiaoben/33989.html

Javascript 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
Jquery注册事件实现方法
May 18 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
5个实用的JavaScript新特性
Jun 16 Javascript
异步加载script的代码
Jan 12 #Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 #Javascript
js对数字的格式化使用说明
Jan 12 #Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 #Javascript
克隆javascript对象的三个方法小结
Jan 12 #Javascript
JavaScript中两种链式调用实现代码
Jan 12 #Javascript
Chrome中JSON.parse的特殊实现
Jan 12 #Javascript
You might like
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php 删除cookie方法详解
2014/12/01 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
详解javascript遍历方式
2015/11/11 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
Ionic快速安装教程
2016/06/03 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
react-router中的属性详解
2017/06/01 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Python使用re模块验证危险字符
2020/05/21 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
小学后勤管理制度
2014/01/14 职场文书
法律七进实施方案
2014/03/15 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python