当前位置：首页 → 问答吧 → picChange图片切换特效-0.3

picChange图片切换特效-0.3

时间：2010-05-21

来源：互联网

原帖地址：picChange图片切换特效-0.3

第一，昨天晚上在图书馆看了基本js的书，突然想起一点：

引用:

在许多情况下，obj.func 等效于 obj["func"]。

第二，之前做的一个picChange图片切换特效，还有很多地方值得改进，尤其是调用的方式。原来的调用方式是：

引用:

picChange("picChange",picChangeHandle.fade,500);

这里直接使用了函数句柄，而且推砌参数的做法的扩展性很不好，当以后参数一多，容易漏写或搞错顺序导致调用失败。现在学着jquery的调用方式来改造我的这个函数（如下）：

引用:

$("someid").animate({height:800,width:400});

在以上两点的提示下，我对picChange做了以下的更新：

1.封装了一个$pic("someid")的对象，它类似于jquery的$(id)方法（不采用$是因为怕与jquery或是prototype.js等冲突），返回一个对象，这个对象包含一个id的属性，和一个picChange的方法。

2.picChange方法的参数是一个对象，这个对象接受changestyle（切换方法），time（切换时间），direction（切换方向），showDesc（是否显示图片描述）四个参数。这样类似animate的传参方式十分便于以后的扩展。

现在调用picChange的方式就像下面这样（向上移出效果，250毫秒）：

引用:

$pic("picChange").picChange({
changeStyle:"move",    //图片切换效果
time:250,       //图片切换速度（毫秒）
direction:"up",       //图片切换方向，移出和联动时有效
showDesc:true       //是否显示图片描述
}};

3.现在这个方法能够自动读取图片的title属性或是alt属性，将其图片描述显示在图片下方。

4.今天又做了一个修改，增加了定时切换图片的效果。又改进了代码的效率。

点击这里查看picChange0.3的效果。

[ 本帖最后由 afc163 于 2010-5-31 21:57 编辑 ]

作者: afc163 发布时间: 2010-05-21

chrome，IE8下切换失效也。

作者: yamanyin 发布时间: 2010-05-21

实在抱歉，我用chrome ie8测试过了，均可切换成功
不知道这位兄台是什么问题？可能是因为网站比较慢，没有载入完整吧。

[ 本帖最后由 afc163 于 2010-5-21 22:19 编辑 ]

作者: afc163 发布时间: 2010-05-21