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实现可拖动DIV的方法
Dec 17 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
详解Vue router路由
Nov 20 Vue.js
异步加载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应用技巧
2008/03/27 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
JS实现图片切换特效
2019/12/23 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python 使用get_argument获取url query参数
2017/04/28 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
解决python 找不到module的问题
2020/02/12 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python 批量将中文名转换为拼音
2021/02/07 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
计算机专业毕业生自荐信
2013/12/31 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Django cookie和session的应用场景及如何使用
2021/04/29 Python
python操作xlsx格式文件并读取
2021/06/02 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫