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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 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中的错误处理、异常处理机制分析
2012/05/07 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
react build 后打包发布总结
2018/08/24 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
Python实现视频下载功能
2017/03/14 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
scrapy爬虫完整实例
2018/01/25 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
活动宣传策划方案
2014/05/23 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Python基础之函数嵌套知识总结
2021/05/23 Python
Nginx配置https的实现
2021/11/27 Servers
Java 多态分析
2022/04/26 Java/Android