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 相关文章推荐
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
vue2.0安装style/css loader的方法
Mar 14 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 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
第二节 对象模型 [2]
2006/10/09 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python实现下载文件的三种方法
2017/02/09 Python
python字符串中的单双引
2017/02/16 Python
Python内置模块logging用法实例分析
2018/02/12 Python
python实现事件驱动
2018/11/21 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
品牌宣传方案
2014/03/21 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年少先队工作总结
2014/12/03 职场文书
北京故宫导游词
2015/01/31 职场文书
Python 阶乘详解
2021/10/05 Python
英镑符号 £
2022/02/17 杂记
使用Python解决图表与画布的间距问题
2022/04/11 Python