网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js图片多功能切换效果

用声音读出全文关注我吧
 2012/8/21 9:59:03 阅读次数:3087

记得以前只会用IE里面的图片切换特效,后台由于接触到不同的浏览器发现,原来只有IE支持。现在终于有了个支持所有浏览器的图片切换特效。让我们开始吧

js图片多功能切换效果,实例特效中有(百页窗,屏幕中间向两边变化,左上角往右下角变化,方格变化)

链接与图片是分开的,其实此特效图片只是用来作为背景,然后不停地切换,而且b的class作为链接b的内容作为title也是不停的切换。这样大家使用起来比较方法!代码如下:

 <a href="#1" id="changePIC" title="ad1">
  <b class="#1">ad1</b><!--class为链接,ad1内容为title-->
  <b class="#2">ad2</b><!--class为链接,ad2内容为title-->
  <img src="http://pic14.nipic.com/20110602/5194143_135353365000_2.jpg"/>
  <img src="http://webdesign365.net/images/banner4.gif"/>
  <div id="maskFx"></div>
 </a>

其实链接与图片是顺序是相同的。从前到后,只要对应就好,还可以这样写:

 <a href="#1" id="changePIC" title="ad1">
  <img src="http://pic14.nipic.com/20110602/5194143_135353365000_2.jpg"/>
  <b class="#1">ad1</b><!--class为链接,ad1内容为title-->
  <img src="http://webdesign365.net/images/banner4.gif"/>
  <b class="#2">ad2</b><!--class为链接,ad2内容为title-->
      <div id="maskFx"></div>
 </a>

好了现在贴完整代码给大家:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片多功能切换效果</title>
<style>
#banner{height:240px;width:1000px;overflow:hidden;position:relative;margin:0 auto;border:1px solid #ccc;border-radius:5px;}
#banner a{border:none;width:1000px;height:240px;cursor:pointer;}
#banner a img{display:none;width:1000px;height:240px;}
#banner a b{display:none;}
#maskFx{position:absolute;width:100%;height:100%;overflow:hidden;}
#maskFx .range{float:left;display:inline;position:relative;}
#maskFx .range div{position:absolute; left:0;top:0;}
.pageBar{display:none;}
</style>
</head>
<body>
<div id="banner">
	<a href="#1" id="changePIC" title="ad1">
		<b class="#1">ad1</b><!--class为链接,ad1内容为title-->
		<b class="#2">ad2</b><!--class为链接,ad2内容为title-->
		<img src="http://pic14.nipic.com/20110602/5194143_135353365000_2.jpg"/>
		<img src="http://webdesign365.net/images/banner4.gif"/>
		<div id="maskFx"></div>
	</a>     
</div>
</body>
</html>
<script>
Tpl={
    w:1000,h:240,
    __clip__:function (el,x,y,w,h){
        var _=[y,w,h,x];
        for(var i=_.length;i--;)_[i]=_[i]<0?"auto":_[i]+"px";
        el.style.clip="rect("+_.join(" ")+")";
    },
    __timeLine__:function (play,end,len) {
        var play=play||Date,end=end||Date,s=0,t=0,len=(len||480)/10,th,p=Math.pow,
        fx=function(x){return x},c=function(f,t){return +f+(t-f)*s};
        return th=setInterval(function(){play(c,s=fx(t++/len));if(s==1)end(clearInterval(th))},10);
    },
    __createMask__:function (){
        var ranges=[],masks=[],r,c;
        for(var i=0;i<32;i++){
            r=document.createElement("DIV");
            r.className="range";
            masks.push(r.appendChild(document.createElement("DIV")));            
            ranges.push(this.MaskDIV.appendChild(r))
        };
        this.masks=masks;
        this.ranges=ranges
    },
    __setMask__:function (bgImg,col,row){
        var a,b,w=Math.ceil(this.w/col),h=Math.ceil(this.h/row),l=this.ranges.length;
        this.uw=w;
        this.uh=h;
        this.actCount=Math.min(col*row,l);	
        for(var i=0;i<l;i++){
            a=this.ranges[i].style;
            b=this.masks[i].style;
            b.width=a.width=w+"px";
            b.height=a.height=h+"px";
            b.background="url("+bgImg+")";
            b.backgroundPosition=(-i%col)*w+"px "+parseInt(-i/col)*h+"px";
            b.clip="rect(0 0 0 0)";
			//alert(i);
            if(i==col*row-1)break
        };
    },
    __fxs__:[
        function (el,x){this.__clip__(el,x(this.uw,0),x(this.uh,0),x(0,this.uw),x(0,this.uh))},
        function (el,x){this.__clip__(el,x(this.uw,0),-1,x(0,this.uw),-1)},
        function (el,x){this.__clip__(el,-1,x(this.uh,0),-1,x(0,this.uh))},
        function (el,x){this.__clip__(el,-1,-1,-1,x(0,this.uh))},
        function (el,x){this.__clip__(el,-1,-1,x(0,this.uw),-1)},
        function (el,x){this.__clip__(el,-1,-1,x(0,this.uw),x(0,this.uh))},
        function (el,x){this.__clip__(el,x(this.uw,0),x(this.uh,0),-1,-1)}
    ]
};
imgFx=function (shell,mask){
    var arrImgs=shell.getElementsByTagName("IMG");
	var spb=document.getElementById("banner").getElementsByTagName("b");
    var pageBar=document.createElement("DIV");
    pageBar.className='pageBar';
    var num,timer,nextTimer,hover;
    this.nums=[];
    shell.appendChild(pageBar);
    var This=this,pos=0,len=arrImgs.length;
    This.shell=shell;
    This.MaskDIV=mask;
    This.uw=This.w;
    This.uh=This.h;
    This.__createMask__();
    var Case=[[32,1,1],[32,1,1],[1,1,5],[1,1,6],[1,1,1],[1,1,2],[1,8,2],[1,1,0],[1,1,5],[4,2,0],[8,3,0],[1,1,3],[1,1,4]];
    var start=function (){
        var cur=arrImgs[pos%len].src,index=Math.round((Case.length-1)*Math.random());
        var opt=Case[index];
        if(This.prevNum)This.prevNum.className="";
        This.prevNum=This.nums[pos%len];
        This.prevNum.className="current";
        This.__setMask__(cur,opt[0],opt[1]);
        timer=This.__timeLine__(function (x){
            for(var i=This.actCount;i--;){
                This.__fxs__[opt[2]].call(This,This.masks[i],x)
            };
       },function (){
           This.shell.style.background="url("+cur+")";
		   This.shell.href=spb[pos%spb.length].className;
		   This.shell.title=spb[pos%spb.length].innerHTML;
		   //alert(spb[pos%spb.length].className);
           pos++;
           if(!hover)nextTimer=setTimeout(start,5000);
       });        
    };
    for(var i=0,l=arrImgs.length;i<l;i++){
        num=document.createElement("A");
        num.href="javascript:void(0)";
        num.innerHTML=(i+1);
        this.nums.push(pageBar.appendChild(num));
        num.numIndex=i;
        num.onclick=function (){
            pos=this.numIndex;
            clearTimeout(timer);
            clearTimeout(nextTimer);
            start()
        }
    };
    start()
};
imgFx.prototype=Tpl;
try {document.execCommand("BackgroundImageCache", false, true);}catch(e){};

var _51Fx=new imgFx(

	document.getElementById("changePIC"),
	document.getElementById("maskFx")
);
</script>

当然大家可以在此基础上修改成自己想要的效果。如果有什么BUG或什么更好的建议可以留言或联系我charrysong#qq.com


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭