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加解密功能页面
Dec 12 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
js禁止表单重复提交
Aug 29 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
JS正则表达式验证密码强度
Mar 18 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仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php基本函数汇总
2015/07/09 PHP
php获取远程文件内容的函数
2015/11/02 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP实现简单登录界面
2019/10/23 PHP
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python读取Android permission文件
2013/11/01 Python
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
社区母亲节活动方案
2014/03/05 职场文书
司机职责范本
2014/03/08 职场文书
合伙协议书
2014/04/23 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
怎样写观后感
2015/06/19 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
python基础之文件处理知识总结
2021/05/23 Python
Python开发五子棋小游戏
2022/05/02 Python