css2014-08-11 23:48:54 3859
CSS3实现的图片立方体轮换,目前不支持IE浏览器。请使用谷歌浏览器或者firefox或者safari。
var CudeHandler={ CudeAllWidth:600, CudeCount:10, CudeArray:null, CudeIndex:0, CudeCurrent:null, Ini:function(){ if(CudeHandler.CudeCount>20){ alert("太多了,浏览器会遭不住的"); return; }else if(CudeHandler.CudeCount<1){ alert("1个都没有怎么显示"); return; } var imgArray=new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img3.jpg","img4.jpg"); CudeHandler.CudeArray=new Array(); for(var i=0;i<CudeHandler.CudeCount;i ){ var mCude=$(""); mCude.css("width",CudeHandler.CudeAllWidth/CudeHandler.CudeCount "px"); for(var j=0;j<6;j ){ var cubicItem=$(""); cubicItem.css("width",CudeHandler.CudeAllWidth/CudeHandler.CudeCount "px").css("background-position",-i*(CudeHandler.CudeAllWidth/CudeHandler.CudeCount) "px 0px"); mCude.append(cubicItem); } $("#Main").append(mCude); CudeHandler.CudeArray[i]=mCude; mCude.animate({marginLeft:"0px"},100); mCude.css("transition-duration",(i 1)*200 "ms"); $(CudeHandler.CudeArray[i]).css("-webkit-transform","rotateX(90deg)").css("-ms-transform","rotateX(90deg)").css("transform","rotateX(90deg)"); } }, Aanimate:function(){ CudeHandler.CudeIndex ; for(var i=0;i<CudeHandler.CudeArray.length;i ){ var deg=(CudeHandler.CudeIndex 1)*90 "deg"; $(CudeHandler.CudeArray[i]).css("-webkit-transform","rotateX(" deg ")").css("-ms-transform","rotateX(" deg ")").css("transform","rotateX(" deg ")"); } } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:CSS3正方体图片轮换,CSS33D图片轮换,CSS3立方体
文章固定链接:https://www.pengyaou.com/legendsz/front/codecss/ODc=.html
上一篇 Jq获取新浪天气预报