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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
详解Vue2.0 事件派发与接收
Sep 05 Javascript
详解VUE 数组更新
Dec 16 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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 更新数据库中断的解决方法
2009/06/05 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
Jar包的作用是什么
2014/03/30 面试题
十一个高级MySql面试题
2014/10/06 面试题
法警的竞聘演讲稿
2014/01/02 职场文书
酒店经理职责
2014/01/30 职场文书
高中生操行评语大全
2014/04/25 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL