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 Archive Network 集合
May 12 Javascript
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 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 stripos()函数及注意事项的分析
2013/06/08 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
心理健康教育心得体会
2013/12/29 职场文书
旅游网创业计划书
2014/01/31 职场文书
保安队长职务说明书
2014/02/23 职场文书
个人查摆剖析材料
2014/10/04 职场文书
团员年度个人总结
2015/02/26 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
欢送会主持词
2015/07/01 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
pycharm无法安装cv2模块问题
2022/05/20 Python