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 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
详解JS函数重载
Dec 04 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
Vue动态获取width的方法
Aug 22 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
js实现点赞效果
2020/03/16 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
用python代码做configure文件
2014/07/20 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
django页面跳转问题及注意事项
2019/07/18 Python
使用Python实现画一个中国地图
2019/11/23 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
pyqt5中动画的使用详解
2020/04/01 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
教师试用期自我鉴定
2014/02/12 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
顶岗实习协议书
2015/01/29 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers