myFocus slide3D v1.1.0 使用方法与下载_javascript技巧

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.jb51.net/js/myfocus/index.html
打包下载:http://www.jb51.net/jiaoben/33989.html

时间: 2024-05-25 12:53:35

myFocus slide3D v1.1.0 使用方法与下载_javascript技巧的相关文章

WordPress 插件——CoolCode使用方法与下载_javascript技巧

本插件原修改自 Chroder.com 的 WordPress Code Highlight 插件.但 CoolCode 插件在它基础上修改了很多的内容. 功能特征 使用方法 更新历史 效果实例 下载:coolcode CoolCode 所做的改进 增加了直接以文件形式下载源代码的功能. 增加了选择是否显示行号功能,在行号显示模式下还可以通过双击代码来隐藏或显示行号. 将固定宽高的代码窗口改成了自适应的窗口. 重新定义了样式表.使显示的代码更美观. 将代码加亮处理后的 class 改为了内嵌式的

发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载_javascript技巧

好多天没有发过日志了~  最近写了一个图片浏览器,是为PHPCMS文件管理器设计的,但后来看到了Lightbox,所以就改了一下,可以给一般的网页使用.  演示及说明地址:  http://longbill.cn/down/sample/blueshow/index.htm  使用方法:   1.下载 blueshow.js 文件,放到服务器上  你也可以直接使用这个: http://www.jb51.net/downtools/blueshow.js  2.在你要用此程序的网页中写上这句(在和

国产PHP开源博客Magike v1.1.0正式版 官方下载_常用工具

国产PHP开源博客Magike v1.1.0正式版 首先感谢各位网友参与到这个开源程序的测试之中,我们获得了很多有用的信息,希望能为大家提供一个使用社区开源模式开发,并遵守相关开源协议的博客产品.Magike是一个运行于php5的博客程序,没有PHP4版本,在安装之前请您注意. 官方网站: http://www.magike.net  项目SVN地址为: http://www.magike.org/svn  项目最新安装包下载地址: http://code.google.com/p/magike

用JS动态设置CSS样式常见方法小结(推荐)_javascript技巧

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

javascript之对系统的toFixed()方法的修正_javascript技巧

0.009.toFixed(2)本该返回0.01的结果,可它却返回了一个0.00,这是这个方法的一个BUG,且这个方法对客户端的JS版本要求有点偏高,至少在IE5.0里这个方法用不起来,所以我写了上面的一段修正代码,并且还解决了这个BUG的问题.若是想完全使用这个自定义的方法替代那个有BUG的系统方法的话,只需要去掉最外层的那个 if 判断就可以了.  //by meizz if(typeof(Number.prototype.toFixed)!="function") {   Num

Javascript中判断一个值是否为undefined的方法详解_javascript技巧

前言 相信大家都知道当声明一个变量,并且没有给赋值的情况下,它的初始值是undefined.但是在javascript中,怎么检查一个值是否为undefined呢? 简单来说,在现代浏览器中,你可以安全的比较变量是否为undefined if (name === undefined) {...} 一些人反对直接使用undefined变量进行比较,因为在旧的浏览器中允许它的值被重新赋值,比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能

概述VUE2.0不可忽视的很多变化_javascript技巧

今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急.然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本.马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了.看了下vue2.0的

字符串的replace方法应用浅析_javascript技巧

这两个参数都是必须的,replace() 方法的参数 replacement 可以是函数而不是字符串.在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用.该函数的第一个参数是匹配模式的字符串.接下来的参数是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数.接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置.最后一个参数是 stringObject 本身.对于replacement是函数的情况,给我们提供了很大的便利. 这有一个很简单的交换

chrome原生方法之数组_javascript技巧

下面看一下chrome/15实现的一些数组方法 --------------------------------------------------------------------------------------------- concat:这个好说,唯一需要注意的就是concat不是就地修改的,是指返回链接后的结果,另外一点是指回展开第一层数组 join:连接数组 pop:出栈操作,注意这个也是就地修改原数组 push: 入栈操作,注意这个也是就地修改原数组 reverse: 倒序数组