zoukankan      html  css  js  c++  java
  • 随机切换图片和图片渐隐渐现效果【原创】

      无聊,发点东西上来玩,图片的渐隐渐现效果看左上角的图片啦。
    /**
     * 图片效果类
     * @author zxub 2006-06-10
     
    */

    var ImageEffect=new function()
    {    
    }

    /**
     * 随机切换
     
    */
    ImageEffect.switchImg
    =function(_container,_width,_height,_delay)
    {    
        
    this.imgUrl=new Array(); //图片地址    
        this.linkUrl=new Array(); //链接地址    
        this.caption=new Array(); //图片说明
        
        
    this.delayTime=(_delay==undefined)?5000:_delay; //每张图切换时间 (单位毫秒)
        
        
    this.imgWidth=(_width==undefined)?240:_width; //图片宽
        this.imgHeight=(_height==undefined)?180:_height; //图片高
        
        
    this.showIndex=-1//图片显示索引
        
        
    this.container=(typeof(_container)=="string")?document.getElementById(_container):_container;    
        
        
    this.imgObj=null;
        
        
    var _point=this;
        
        
    this.goUrl=function()
        {
            
    var _url=(this.linkUrl[this.showIndex]==undefined)?this.imgUrl[this.showIndex]:this.linkUrl[this.showIndex];
            window.open(_url,
    "_blank");
        }
        
        
    this.setImgObj=function()
        {
            
    this.imgObj=document.createElement("img");
            
    this.imgObj.style.cssText="cursor:pointer;filter: revealTrans(duration=1,transition=120); border:1px solid black";
            
    this.imgObj.setAttribute("width",this.imgWidth);
            
    this.imgObj.setAttribute("height",this.imgHeight);
            
    this.imgObj.setAttribute("border",0);
            
    this.imgObj.setAttribute("id","img_"+_container);        
            
    this.imgObj.onclick=function()
            {
                _point.goUrl();
            }
            
    this.container.appendChild(this.imgObj);
        }
        
    this.setImgObj();
        
        
    this.show=function()
        {
            _point.showIndex
    =(_point.showIndex+1)%_point.imgUrl.length;
            
    with (_point.imgObj)
            {
                
    if (_point.imgObj.filters)
                {
                    filters[
    0].Transition=37;
                    filters[
    0].apply();
                    src
    =_point.imgUrl[_point.showIndex];
                    filters[
    0].play();
                    title
    =(_point.caption[_point.showIndex]==undefined)?_point.imgUrl[_point.showIndex]:_point.caption[_point.showIndex];
                }
                
    else
                {
                    src
    =_point.imgUrl[_point.showIndex];
                    title
    =(_point.caption[_point.showIndex]==undefined)?_point.imgUrl[_point.showIndex]:_point.caption[_point.showIndex];
                }            
            }
            window.setTimeout(_point.show, _point.delayTime);
        }
    }

    /**
     * 渐隐渐现
     
    */
    ImageEffect.slideShow
    =function(_container,_width,_height,_delay)
    {    
        
    this.imgUrl=new Array(); //图片地址    
        this.linkUrl=new Array(); //链接地址    
        this.caption=new Array(); //图片说明
        
        
    this.delayTime=(_delay==undefined)?5000:_delay; //每张图切换时间 (单位毫秒)
        
        
    this.imgWidth=(_width==undefined)?240:_width; //图片宽
        this.imgHeight=(_height==undefined)?180:_height; //图片高
        
        
    this.showIndex=-1//图片显示索引
        
        
    this.container=(typeof(_container)=="string")?document.getElementById(_container):_container;
        
        
    this.curpos=10;
        
    this.degree=10;
        
    this.canvas="canvas0";        
            
        
    var _point=this;
        
        
    this.timerId;
        
        
    this.setShowArea=function()
        {
            
    var _div=document.createElement("div");
            _div.style.cssText
    ="position:relative;"+this.imgWidth+";height:"+this.imgHeight+";overflow:hidden";
            
    this.container.appendChild(_div);
            
    var canvas=document.createElement("div");canvas.id="canvas0";
            canvas.style.cssText
    ="cursor:pointer;position:absolute;"+this.imgWidth+";height:"+this.imgHeight+";top:1;left:2;filter:alpha(opacity=10);-moz-opacity:10";
            _div.appendChild(canvas);
            canvas
    =document.createElement("div");
            canvas.id
    ="canvas1";
            canvas.style.cssText
    ="cursor:pointer;position:absolute;"+this.imgWidth+";height:"+this.imgHeight+";top:1;left:2;filter:alpha(opacity=10);-moz-opacity:10";
            _div.appendChild(canvas);
        }
        
    this.setShowArea();
        
        
    this.fadePic=function()
        {      
            
    if (_point.curpos<100)
            {  
                
    var _tempObj=document.getElementById(_point.canvas);
                _point.curpos
    +=10;
                
    if (_tempObj.filters)
                {
                    _tempObj.filters.alpha.opacity
    =_point.curpos;
                }
                
    else if (_tempObj.style.MozOpacity)
                {
                    _tempObj.style.MozOpacity
    =_point.curpos/101;
                }
            }
            
    else
            {
                _point.canvas
    =(_point.canvas=="canvas0")? "canvas1" : "canvas0";
                
    var _tempObj=document.getElementById(_point.canvas);
                window.clearInterval(_point.timerId);
                _point.insertImg(_tempObj);            
                _tempObj.style.visibility
    ="hidden";
                window.setTimeout(_point.rotateImg,_point.delayTime);
            }
        }
        
        
    this.insertImg=function(_container)
        {
            
    this.showIndex=(this.showIndex+1)%this.imgUrl.length;
            
    var _htmlString='<img src="'+this.imgUrl[this.showIndex]+'" border="0" width="'+this.imgWidth+'" height="'+this.imgHeight+'">';
            _container.innerHTML
    =_htmlString;
        }
        
        
    this.rotateImg=function()
        {
            _point.resetImg(_point.canvas);
            
    var _obj=document.getElementById(_point.canvas);
            _obj.style.zIndex
    ++;
            _obj.style.visibility
    ="visible";
            _obj.onclick
    =function()
            {
                _point.goUrl();
            }
            _obj.title
    =(_point.caption[_point.showIndex]==undefined)?_point.imgUrl[_point.showIndex]:_point.caption[_point.showIndex];
            _point.timerId
    =window.setInterval(_point.fadePic,50);        
        }
        
        
    this.goUrl=function()
        {
            
    var _index=(this.showIndex==0)?(this.imgUrl.length-1):(this.showIndex-1);
            
    var _url=(this.linkUrl[_index]==undefined)?this.imgUrl[_index]:this.linkUrl[_index];
            window.open(_url,
    "_blank");
        }
        
        
    this.resetImg=function(_canvas)
        {
            
    this.curpos=10;
            _canvas
    =document.getElementById(_canvas);
            
    if (_canvas.filters)
            {
                _canvas.filters.alpha.opacity
    =this.curpos;
            }
            
    else if (_canvas.style.MozOpacity)
            {
                _canvas.style.MozOpacity
    =this.curpos/101;
            }
        }
        
        
    this.show=function()
        {
            
    this.insertImg(document.getElementById(this.canvas));
            
    this.rotateImg();
        }
    }
      再放个例子:
    var sImg1=new ImageEffect.switchImg("tt1",506,234,3000);
    var sImg2=new ImageEffect.slideShow("tt2",506,234,3000);
    for (var i=0; i<7; i++)
    {
        sImg1.imgUrl[i]
    ="testImg/"+(i+1)+".jpg";
        sImg2.imgUrl[i]
    ="testImg/"+(i+1)+".jpg";    
    }
    sImg1.show();
    sImg2.show();
      在网上找了好久,没好用的,就自己封了个,大家凑或用了。
  • 相关阅读:
    HDU 3951 (博弈) Coin Game
    HDU 3863 (博弈) No Gambling
    HDU 3544 (不平等博弈) Alice's Game
    POJ 3225 (线段树 区间更新) Help with Intervals
    POJ 2528 (线段树 离散化) Mayor's posters
    POJ 3468 (线段树 区间增减) A Simple Problem with Integers
    HDU 1698 (线段树 区间更新) Just a Hook
    POJ (线段树) Who Gets the Most Candies?
    POJ 2828 (线段树 单点更新) Buy Tickets
    HDU 2795 (线段树 单点更新) Billboard
  • 原文地址:https://www.cnblogs.com/zxub/p/430675.html
Copyright © 2011-2022 走看看