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的checkbox下拉框插件代码
Jun 25 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
微信小程序实现星星评分效果
Nov 01 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
第十四节 命名空间 [14]
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php url路由入门实例
2014/04/23 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
vue-axios使用详解
2017/05/10 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python地图绘制实操详解
2019/03/04 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
公务员的自我鉴定
2013/10/26 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
68句权威创业名言
2019/08/26 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python