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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
jquery图形密码实现方法
Mar 11 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
Smarty模板语法详解
2019/07/20 PHP
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
微信小程序解析富文本过程详解
2019/07/13 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
简单实现Python爬取网络图片
2018/04/01 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
维护民族团结演讲稿
2014/08/27 职场文书
领导班子对照检查材料
2014/09/22 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
索尼ICF-36收音机评测
2022/04/30 无线电