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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
详解Vue方法与事件
Mar 09 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
Javascript 解构赋值详情
Nov 17 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
php cc攻击代码与防范方法
2012/10/18 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python中的CURL PycURL使用例子
2014/06/01 Python
python映射列表实例分析
2015/01/26 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python中使用print输出中文的方法
2018/07/16 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
大学校庆邀请函
2014/01/11 职场文书
软件项目实施计划书
2014/05/02 职场文书
护士求职信
2014/07/05 职场文书
国富论读书笔记
2015/06/26 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
Python find()、rfind()方法及作用
2022/12/24 Python