myFocus slide3D v1.1.0 使用方法与下载
时间:2024-04-17 09:55:41
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.aspxhome.com/js/myfocus/index.html
打包下载:https://www.aspxhome.com/jiaoben/33989.html
标签:myFocus,slide3D
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
FrontPage XP设计教程6——制作多媒体网页
2008-10-11 12:38:00
![](https://img.aspxhome.com/file/UploadPic/200810/17/20081017124029644s.jpg)
Python 爬虫之Beautiful Soup模块使用指南
2021-10-16 13:28:03
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2022-03-31 09:30:33
![](https://img.aspxhome.com/file/2023/2/84152_0s.png)
简单谈谈axios中的get,post方法
2023-10-05 08:47:53
asp如何在ADO中客户端利用好缓存技术?
2010-06-17 12:50:00
python 教程之blinker 信号库
2023-11-23 10:15:51
浅谈JavaScript中你可能不知道URL构造函数的属性
2024-04-17 10:03:03
![](https://img.aspxhome.com/file/2023/9/136419_0s.jpg)
Firefox 3.6新功能预览
2009-12-01 14:23:00
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2023-09-28 13:34:17
![](https://img.aspxhome.com/file/2023/3/101293_0s.jpg)
AlternatingItemTemplate类似于 ItemTemplate 元素
2023-07-14 13:09:07
python实现划词翻译
2023-04-28 19:36:54
![](https://img.aspxhome.com/file/2023/1/84131_0s.jpg)
谈一谈JS消息机制和事件机制的理解
2024-05-03 15:59:22
![](https://img.aspxhome.com/file/2023/8/129078_0s.jpg)
如何在页面中对不同的数据进行相同的处理?
2010-06-26 12:30:00
Python3一行代码实现图片文字识别的示例
2021-11-22 06:45:51
![](https://img.aspxhome.com/file/2023/9/127799_0s.jpg)
centos 6.9安装mysql的详细教程
2024-01-13 06:51:15
小型分页的设计
2011-08-18 18:32:26
VSCode开发必备插件推荐(墙裂推荐!)
2022-06-21 14:09:16
![](https://img.aspxhome.com/file/2023/2/127212_0s.png)
使用Go进行单元测试的实现
2024-04-25 15:11:07
Mysql数据库表中为什么有索引却没有提高查询速度
2024-01-13 19:25:16
![](https://img.aspxhome.com/file/2023/7/108907_0s.png)
PHP implode()函数用法讲解
2023-06-19 22:54:34
![](https://img.aspxhome.com/file/2023/1/55381_0s.png)