js實現(xiàn)3D圖片環(huán)展示效果
更新時間：2017年03月09日 14:08:59 作者：shangpudxd
本文主要介紹了js實現(xiàn)3D圖片環(huán)展示效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
可對整體進行拖拽
效果圖：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0;margin:0; font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif !important;}
html body{overflow: hidden;}
body{background:#ccc;}
.box{width:140px; height:200px; -webkit-transform-style:preserve-3d; -webkit-transform: perspective(800px) rotateY(0deg) rotateX(0deg); position:relative; margin:400px auto;}
.box span{width:140px; height:200px; position: absolute; background:deepskyblue; font-size:20px;
text-align: center; line-height:200px; color:white;}
</style>
<script>
function r2n(n){
return n*Math.PI/180
}
window.onload=function(){
var oBox=document.getElementsByClassName('box')[0];
var aS=document.getElementsByTagName('span');
for(var i=0;i<aS.length;i++){
aS[i].style.WebkitTransition='1s all ease '+(aS.length-i)*.1+'s';
aS[i].style.WebkitTransform='rotateY('+i*360/aS.length+'deg)'+' translateZ(500px) '
}
var pos=[];
var x=0;
var y=0;
var timer=null;
var timer2=null;
document.onmousedown=function(ev){
timer=setInterval(function(){
pos[0]=pos[2];
pos[1]=pos[3];
pos[2]=x;
pos[3]=y;
},30);
var disx=ev.pageX-x;
var disy=ev.pageY-y;
document.onmousemove=function(ev){
x=ev.pageX-disx;
y=ev.pageY-disy;
oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)';
};
document.onmouseup=function(){
clearInterval(timer);
var speedx=pos[2]-pos[0];
var speedy=pos[3]-pos[1];
timer2=setInterval(function(){
x+=speedx;
y+=speedy;
oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)';
speedx*=0.94;
speedy*=0.94;
if(Math.abs(speedx)<1)speedx=0;
if(Math.abs(speedy)<1)speedy=0;
if(speedx==0&&speedy==0){
clearInterval(timer2)
}
},30);
document.onmousemove=null;
document.onmouseup=null;
}
};
return false
}
</script>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
javascript中call,apply,bind函數(shù)用法示例
這篇文章主要介紹了javascript中call,apply,bind函數(shù)用法,結(jié)合實例形式分析了call,apply,bind函數(shù)的功能、使用方法與相關注意事項,需要的朋友可以參考下2016-12-12
我原本以為JavaScript是不能寫隊列的,最近發(fā)現(xiàn)JavaScript是可以模擬隊列的,并且花樣還挺多,所以本文將給大家介紹JavaScript模擬隊列的基礎寫法用法,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了JS代碼簡潔方式之函數(shù)方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
BOM操作querySelector?querySeletorAll獲取標簽對象
這篇文章主要為大家介紹了BOM操作querySelector?querySeletorAll獲取標簽對象步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
引用其它js時如何同時處理多個window.onload事件
引用其它js時，其js卻使用了window.onload事件，這樣的話，引入的頁面的onload事件就有可能執(zhí)行不了，那么該如何解決呢？祥看下文2014-09-09
Bootstrap3.0建站教程(一)之bootstrap表單元素排版
本文給大家介紹Bootstrap3.0建站教程(一)之bootstrap表單元素排版，本文給大家列舉了文字和輸入框前后排列和上下排列的實例代碼，有需要的朋友參考下吧2016-06-06
JavaScript實現(xiàn)谷歌瀏覽器插件開發(fā)的方法詳解
對于瀏覽器插件相信大家都不陌生，誰的瀏覽器不裝幾個好用的插件呢，更是有油猴這個強大的神器。所以本文就來用JavaScript開發(fā)一個谷歌瀏覽器插件，感興趣的小伙伴可以了解一下2022-11-11
JS生態(tài)系統(tǒng)加速eslint解析器使用實例探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速之eslint解析器使用實例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)div色塊碰撞，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
javascript應用：Iframe自適應其加載的內(nèi)容高度
javascript應用：Iframe自適應其加載的內(nèi)容高度...2007-04-04