<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D变换改变家居生活方式-妙味课堂-www.miaov.com</title>
<style>
body,ul,ol{margin:0;padding:0;}
body{ background:#b9caab;}
li{ list-style:none;}
#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;}
#list li{height:40px;width:400px; position:relative;cursor:pointer;-webkit-perspective:800px; }
#list li div{height:40px;width:400px; -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;position:relative;-webkit-transform:translateZ(-200px);-webkit-transform:50ms all linear;}
#list span{height:40px; width:400px; position:absolute;left:0;top:0; overflow:hidden;}
#list div span:nth-child(1){background:url(img/1.jpg) no-repeat; -webkit-transform:translateZ(200px);}
#list div span:nth-child(2){background:url(img/2.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(200px) rotateY(-90deg);
}
#list div span:nth-child(3){background:url(img/3.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(-200px);
}
#list div span:nth-child(4){background:url(img/4.jpg) no-repeat;-webkit-transform-origin:left;-webkit-transform:translateZ(200px) rotateY(90deg);
}
#list em{ width:400px;height:400px; position:absolute;left:0;background:#666;}
#list li em:nth-of-type(1){-webkit-transform-origin:top;-webkit-transform:translateZ(200px) rotateX(-90deg); top:0;}
#list li em:nth-of-type(2){-webkit-transform-origin:bottom;-webkit-transform:translateZ(200px) rotateX(90deg); bottom:0;}
#list li:nth-last-child(1){ z-index:10;}
#list li:nth-last-child(2){ z-index:20;}
#list li:nth-last-child(3){ z-index:30;}
#list li:nth-last-child(4){ z-index:40;}
#list li:nth-last-child(5){ z-index:50;}
#list li:nth-last-child(6){ z-index:60;}
#list li:nth-child(2) span{ background-position:0 -40px;}
#list li:nth-child(3) span{ background-position:0 -80px;}
#list li:nth-child(4) span{ background-position:0 -120px;}
#list li:nth-child(5) span{ background-position:0 -160px;}
#list li:nth-child(6) span{ background-position:0 -200px;}
#list li:nth-child(7) span{ background-position:0 -240px;}
#list li:nth-child(8) span{ background-position:0 -280px;}
#list li:nth-child(9) span{ background-position:0 -320px;}
#list li:nth-child(10) span{ background-position:0 -360px;}
#list li:nth-child(11) span{ background-position:0 -400px;}
#btns{ width:130px; margin:0 auto;}
#btns li{ width:20px;height:20px;background:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:20px; float:left; color:#f60; margin:0 3px; cursor:pointer;}
#btns .active{ background:#f60;color:#fff;}
h2 { text-align:center; color:#617353; }
</style>
<h2>玩法很简单：用鼠标拖拽图片向左右方向就好～</h2>
<ul id="list">
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
<li>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<em></em>
<em></em>
</div>
</li>
</ul>
<ol id="btns">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script>
var oList=document.getElementById("list");
var oBtns=document.getElementById("btns");
tabPic(oList,oBtns);
function tabPic(obj,btns)
{
var aLi=obj.getElementsByTagName("li");
var aBtn=btns.getElementsByTagName("li");
var oUl=document.getElementsByTagName('ul')[0];
var iDis=aLi[0].offsetWidth;
var iDeg=90;
aBtn.iNow=0;
for(var i=0;i<aBtn.length;i++)
{
oUl.title=aBtn[i].title='妙味课堂-www.miaov.com';
aBtn[i].index=i;
aBtn[i].onclick=function()
{
for(var i=0;i<aLi.length;i++)
{
starMove(aLi[i],-this.index*iDeg,aBtn);
}
};
}
for(var i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].iDeg=0;
aLi[i].off=false;
aLi[i].onmousedown=function(ev)
{
if(this.off)
{
return;
}
var ev=event||ev;
var iNowX=ev.clientX;
var iNowDeg=0;
var oThis=this;
var iLength=0;
var iMin=0;
var iMax=0;
document.onmousemove=function(ev)
{
if(Math.abs(iNowDeg)>=80)
{
return;
}
var ev=event||ev;
iNowDeg+=(ev.clientX-iNowX)/iDis*(iDeg-30);
iLength=Math.abs(parseInt(iNowDeg/5));
iMin=oThis.index-iLength>0?oThis.index-iLength:0;
iMax=oThis.index+iLength<aLi.length?oThis.index+iLength:aLi.length-1;
for(var i=iMin;i<=iMax;i++)
{
aLi[i].iDeg+=(ev.clientX-iNowX)/iDis*(iDeg-30);
setDeg(aLi[i]);
}
iNowX=ev.clientX;
}
document.onmouseup=function()
{
var iEnd=0;
document.onmouseup=document.onmousemove=null;
if( Math.abs(iNowDeg)>iDeg/4)
{
iEnd=iNowDeg>0?90-iNowDeg:-(90-Math.abs(iNowDeg));
}
else
{
iEnd=-iNowDeg;
}
iEnd=Math.round(iEnd+oThis.iDeg);
for(var i=0;i<aLi.length;i++)
{
starMove(aLi[i],iEnd,aBtn);
}
}
return false;
};
}
}
function starMove(obj,iTarget,aBtn)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.off=true;
var iNow= iTarget>=0? Math.abs((aBtn.length-iTarget/90)%aBtn.length): Math.abs((iTarget/90) % aBtn.length);
if(iNow!=aBtn.iNow)
{
aBtn[aBtn.iNow].className="";
aBtn.iNow=iNow;
aBtn[aBtn.iNow].className="active";
}
obj.timer=setInterval(
function()
{
if(Math.abs(obj.iDeg-iTarget)<2)
{
clearInterval(obj.timer);
obj.iDeg=iTarget;
obj.off=false;
}
else
{
var iSpeed=(iTarget-obj.iDeg)/4;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
obj.iDeg=parseInt(obj.iDeg+iSpeed);
}
setDeg(obj);
},20
);
}
function setDeg(obj)
{
var oDiv=obj.children[0];
with(oDiv.style)
{
WebkitTransform="translateZ(-200px) rotateY("+obj.iDeg+"deg)";
}
}
</script>
3D变换改变家居生活方式 JS中的拖拽+CSS3的尝试 只兼容谷歌浏览器.zip
版权申诉
40 浏览量
2022-10-31
01:38:29
上传
评论
收藏 660KB ZIP 举报
3D变换改变家居生活方式 JS中的拖拽+CSS3的尝试 只兼容谷歌浏览器.zip （8个子文件） 
132677871483452852 img 
2.jpg 74KB 1.jpg 74KB 3.jpg 87KB
bg.png 193KB 4.jpg 106KB
index_3D - 缓冲.html 7KB 效果图.jpg 124KB index_3D.html 7KB资源评论
