blueskyc's blog
永不放弃

      前几天,有个朋友叫我帮他做一个静态网页,并说时间很紧,就半个小时,我这个人比较重情谊,也比较讲义气,所以什么都不说接下来了。在其中他要求总的大小 不能超过500K,原来他自己找人也做了一个版本的,也随便给我了,我也比较懒,所以我就在他的基础上改了。我拿来一看,当时晕了,一个网页竟然有4M, 还说不能超过500K呢。我打开看了看,原来用了好多的Flash,我就给他把一些Flash撤了,但是他说那个淡入淡出的效果不能掉,所以我就加上去, 结果还是800多K。这样我就没办法咯,就只有想用代码来给他实现了,在有限的记忆当中好像曾经看过的,所以上网一收,有淡入淡出的效果,但是没有多张图 片切换的(哎,可能是没找到吧)!所以我就自己把找到的代码研究研究,自己写了个,呵呵…… 运气很好,试了几下就成功了。怕忘了,所以写上来做记录,也方便其他需要的朋友不用到处去找和写了!下面就是我的代码,如果各位有什么好的见解,可以提 出。

以下代码重新进行更新,修改了不兼容Firefox和Opera浏览器。

 

<html>
  
<head>
    
<title>dt filter</title>
    
<script language="javascript">
      
<!--
        var j
=0;
        var i 
= 100;
        var c 
= false;
        
// the array is used to store the picture
        names= new Array();
        names[
0]="F001.JPG";
        names[
1]="DSC01297.JPG";
        names[
2]="DSC08292.JPG";
        names[
3]="11.jpg";
        names[
4]="DSCF1670.JPG";
        var isIE 
= isIE();
        
//var isIE = true;
        function filter(){
            
if(document.all);
            
if(c == true) {
                i
++;
            }
            
if(i==100) {
                i
--;
                c 
= false
            }
            
if(i==1) {
                i
++;
                c 
= true;
                
//change the picture
                if(j==names.length-1){j=0;}
                    
else{++j;}
                
//alert(j);
                
//get the picture by the index of names array
                myimage.src=names[j];
            }
            
if(c == false) {
                i
--;
            }
            
             
//show or hide the picture by filter
            
//alert(isIE);
            if (isIE)
            {
                myimage.filters.alpha.opacity
=i;
            }
            
else
            {
                myimage.style.opacity 
= i/100;
            }
            setTimeout(
"filter()",50);
        }

    function isIE()
    {
        var ret 
= false
        
if (navigator.userAgent.indexOf("MSIE")>0)
        {
            ret 
=true;    
        }
        
return ret;
    }

      
-->
    
</script>
  
</head>

 
<body onload="filter()"><!--load the js function-->
      
<img id="myimage" src="F001.JPG" width="500" height="350"
        style
="filter:alpha();position:absolute;top:10;left:0;">
     
</body>
 
</html>

 

posted on 2008-07-10 17:04  Cherry Chen  阅读(5386)  评论(2编辑  收藏  举报