欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)3D切換焦點(diǎn)圖

 更新時(shí)間：2015年10月16日 09:35:59   投稿：hebedich  
一款用JavaScript模仿3D立體切換效果的js焦點(diǎn)幻燈片特效，使用方法很簡(jiǎn)單：用鼠標(biāo)拖拽圖片向左右方向就好～

做了一個(gè)用鼠標(biāo)拖拽配合 CSS3 的小嘗試，截圖如下：

熟悉拖拽效果的朋友應(yīng)該不會(huì)陌生鼠標(biāo)按住以后，左右拖動(dòng)的實(shí)現(xiàn)方式。
這個(gè)小demo里嘗試的是把CSS3中的相關(guān)知識(shí)點(diǎn)運(yùn)用到圖片展示中，
當(dāng)拖動(dòng)圖片時(shí)，顯示出立體的感覺(jué)～～

直接代碼如下：

#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?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 iSpeed=0;
 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()
 {
  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)";
 }
}

這效果只是一個(gè)嘗試，如有需要的朋友，可直接在下面留言，發(fā)送源碼。

相關(guān)文章

  • js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能

    js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能

    這篇文章主要為大家詳細(xì)介紹了js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-06-06
  • js中關(guān)于base64編碼的問(wèn)題

    js中關(guān)于base64編碼的問(wèn)題

    這篇文章主要介紹了js中關(guān)于base64編碼的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-02-02
  • js變量以及其作用域詳解

    js變量以及其作用域詳解

    Javascript和Java、C這些語(yǔ)言不同，它是一種無(wú)類(lèi)型、弱檢測(cè)的語(yǔ)言。它對(duì)變量的定義并不需要聲明變量類(lèi)型，我們只要通過(guò)賦值的形式，可以將各種類(lèi)型的數(shù)據(jù)賦值給同一個(gè)變量
    2012-01-01
  • JavaScript實(shí)現(xiàn)數(shù)組去重的7種方法

    JavaScript實(shí)現(xiàn)數(shù)組去重的7種方法

    去重是開(kāi)發(fā)中經(jīng)常會(huì)碰到的一個(gè)熱點(diǎn)問(wèn)題，本文詳細(xì)的介紹了JavaScript實(shí)現(xiàn)數(shù)組去重的7種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-03-03
  • Js 控制表單域代碼

    Js 控制表單域代碼

    js改變下拉框的顯示等實(shí)現(xiàn)代碼。
    2009-05-05
  • 用js判斷輸入是否為中文的函數(shù)

    用js判斷輸入是否為中文的函數(shù)

    本篇文章主要是對(duì)js判斷輸入是否為中文的函數(shù)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-03-03
  • 使用javascript實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換

    使用javascript實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換

    本文主要介紹了使用javascript實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換的效果，代碼非常的簡(jiǎn)單，兼容性十分棒，這里推薦給小伙伴們。
    2015-01-01
  • Js數(shù)組對(duì)象如何根據(jù)多個(gè)key值進(jìn)行分類(lèi)

    Js數(shù)組對(duì)象如何根據(jù)多個(gè)key值進(jìn)行分類(lèi)

    這篇文章主要介紹了Js數(shù)組對(duì)象如何根據(jù)多個(gè)key值進(jìn)行分類(lèi),每周從 npm 下載?lodash.groupBy?的次數(shù)在 150 萬(wàn)到 200 萬(wàn)之間，很高興看到 JavaScript 填補(bǔ)了這些空白，讓我們的工作變得更加輕松，需要的朋友可以參考下
    2024-02-02
  • 從parcel.js打包出錯(cuò)到選擇nvm的全部過(guò)程

    從parcel.js打包出錯(cuò)到選擇nvm的全部過(guò)程

    這篇文章主要介紹了從parcel.js打包出錯(cuò)到選擇nvm的全部過(guò)程，需要的朋友可以參考下
    2018-01-01
  • javascript生成隨機(jī)大小寫(xiě)字母的方法

    javascript生成隨機(jī)大小寫(xiě)字母的方法

    這篇文章主要介紹了javascript生成隨機(jī)大小寫(xiě)字母的方法,需要的朋友可以參考下
    2014-02-02

最新評(píng)論