javascript實現3D切換焦點圖_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:44:22

javascript實現3D切換焦點圖_javascript技巧

javascript實現3D切換焦點圖_javascript技巧:做了一個用鼠標拖拽配合 CSS3 的小嘗試，截圖如下：熟悉拖拽效果的朋友應該不會陌生鼠標按住以后，左右拖動的實現方式。這個小demo里嘗試的是把CSS3中的相關知識點運用到圖片展示中，當拖動圖片時，顯示出立體的感覺～～直接代碼如下： #list

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript實現3D切換焦點圖_javascript技巧:做了一個用鼠標拖拽配合 CSS3 的小嘗試，截圖如下：熟悉拖拽效果的朋友應該不會陌生鼠標按住以后，左右拖動的實現方式。這個小demo里嘗試的是把CSS3中的相關知識點運用到圖片展示中，當拖動圖片時，顯示出立體的感覺～～直接代碼如下： #list

做了一個用鼠標拖拽配合 CSS3 的小嘗試，截圖如下：

熟悉拖拽效果的朋友應該不會陌生鼠標按住以后，左右拖動的實現方式。
這個小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