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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
javascript生成大小写字母
Jul 03 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
vue+element实现表单校验功能
May 20 Javascript
js实现双色球效果
Aug 02 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
Vue-Router的使用方法
2018/09/05 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python模块如何查看
2020/06/16 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
服务口号大全
2014/06/11 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
见习报告怎么写
2014/10/31 职场文书
2016新年晚会开场白
2015/12/03 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
浅谈Web Storage API的使用
2021/06/23 Javascript
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电