做了一个用鼠标拖拽配合 CSS3 的小尝试,截图如下:

javascript实现3D切换焦点图

熟悉拖拽效果的朋友应该不会陌生鼠标按住以后,左右拖动的实现方式。
这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中,
当拖动图片时,显示出立体的感觉~~

直接代码如下:

#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;}

HTML

<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>

JAVASCRIPT

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/9));
  iMin=oThis.index-iLength>0"";
 aBtn.iNow=iNow;
 aBtn[aBtn.iNow].className="active";
 }
 obj.timer=setInterval(
 function()
 {
  iSpeed+=(iTarget-obj.iDeg)/12;
  iSpeed*=0.86;
  if(Math.abs(obj.iDeg-iTarget)<0.5 && Math.abs(iSpeed)<0.5)
  {
  clearInterval(obj.timer);
  obj.iDeg=iTarget;
  obj.off=false;
  }
  else
  { 
  obj.iDeg+=iSpeed;
  }
  setDeg(obj);
 },24
 );
}
function setDeg(obj)
{
 var oDiv=obj.children[0];
 with(oDiv.style)
 {
 WebkitTransform="translateZ(-200px) rotateY("+obj.iDeg+"deg)";
 }
}

这效果只是一个尝试,如有需要的朋友,可直接在下面留言,发送源码。

标签:
javascript,3D切换,焦点图

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“javascript实现3D切换焦点图”

暂无“javascript实现3D切换焦点图”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。