JavaScript图片显示

核心提示： 由于ie和其他浏览器的兼容问题，这里必须使用两种方式来阻止默认事件，JavaScript图片显示(4)，setOpacity函数Code//设置元素透明度functionsetOpacity(elem,level){if(elem.filters)elem.style.filter=

由于ie和其他浏览器的兼容问题，这里必须使用两种方式来阻止默认事件。

setOpacity函数

Code

//设置元素透明度
functionsetOpacity(elem,level){
　　if(elem.filters)
　　　　elem.style.filter='alpha(opacity='+level+')';
　　else
　　　　elem.style.opacity=level/100;}

第一个分支是处理ie的元素透明度设置，第二个分支是处理其他浏览器的元素透明度设置。

这里顺便提醒一下，在ie中要使alpha滤镜起作用，必须搭配position:absolute样式设置，否则透明设置可能不起作用。

fade函数

Code

//实现渐隐或者渐显动画的函数
//参数：动画元素，开始透明度，结束透明度，动画持续时间
//返回：动画句柄数组
functionfade(elem,startVal,finishVal,time){
　　diff=finishVal-startVal;
　　vart=time||1000;
　　varhandles=[];
　　for(vari=0;i<100;i++){
　　　　(function(n){
　　　　　　handles.push(setTimeout(function(){
　　　　　　　　setOpacity(elem,(startVal+diff*n/100));
　　　　　　},t*n/100));
　　　　})(i);
　　}
　　returnhandles;
}

slide函数

Code

//实现滑动动画的函数，可以实现横/纵向滑动展开/收拢，或者横/纵向滑动位移
//参数：动画元素，动画属性，开始值，结束值，动画持续时间
//动画属性可选值：'top','left','height','left','padding','margin'
//返回：动画句柄数组
functionslide(elem,styleName,startVal,finishVal,time){
　　diff=finishVal-startVal;
　　vart=time||1000;
　　varhandles=[];
　　for(vari=0;i<200;i++){
　　　　(function(n){
　　　　　　handles.push(setTimeout(function(){
　　　　　　　　elem.style[styleName]=(startVal+(diff*n/200))+'px';
　　　　　　},t*n/200));
　　　　})(i);
　　}
　　returnhandles;
}