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 相关文章推荐
Knockoutjs快速入门(经典)
Dec 24 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
JavaScript中的this机制
2016/01/30 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Flask之flask-script模块使用
2018/07/26 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python中元组的用法整理
2020/06/15 Python
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
教学实验楼管理制度
2014/02/01 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
小学教师读书笔记
2015/07/01 职场文书
公司新员工欢迎词
2015/09/30 职场文书
自荐信大全
2019/03/21 职场文书
使用Python开发冰球小游戏
2022/04/30 Python