91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

原生JS實現逼真的圖片3D旋轉效果詳解

發布時間:2020-10-05 14:50:13 來源:腳本之家 閱讀:332 作者:庚中 欄目:web開發

本文實例講述了原生JS實現逼真的圖片3D旋轉效果。分享給大家供大家參考,具體如下:

實現效果:

原生JS實現逼真的圖片3D旋轉效果詳解

實現過程:

步驟一:先寫一個簡單的html結構,創建一個box盒子,里面放對應的圖片(也可以用js創建圖片,這里為了好理解,我們直接用html創建).

<body><div class="box">
  <img src="./img/1.jpg" >
  <img src="./img/2.jpg" >
  <img src="./img/3.jpg" >
  <img src="./img/4.jpg" >
  <img src="./img/5.jpg" >
  <img src="./img/6.jpg" >
  <img src="./img/7.jpg" >
  <img src="./img/8.jpg" >
  <img src="./img/9.jpg" >
  <img src="./img/10.jpg" >
  <img src="./img/11.jpg" >
  <img src="./img/12.jpg" >
</div>

步驟二:給盒子和圖片,設置對應的樣式

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #000;
      /*overflow: hidden;*/
    }
    #box{
      width:133px;
      height: 200px;
      margin: 200px auto;
      position:relative;
      border: 1px solid #fff;
      transform-style: preserve-3d;
      /*2.transform–style屬性指定嵌套元素是在三維空間中呈現。(使用此屬性必須先使用transform 屬性)*/
      /*perspective:800px;*/
      /*3.設置透視距離*/
      transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;                                                                                                                                                                                                                  deg);
    }
    #box img{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 3px;
      box-shadow: 0px 0px 5px #fff;
      /*4.設置圖片陰影*/
      /*-webkit-box-reflect: below 15px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);*/
      /*-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
      -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
      /*5.設置圖片倒影:直接記住吧(3個值。1. direction 定義方向,取值包括 above 、 below 、 left 、 right。);2. offset定義反射偏移的距離;3.mask-box-image定義遮罩圖像,該圖像將覆蓋投影區域。如果省略該參數值,則默認為無遮罩圖像。*/
    }
  </style>

第三步:js

  <script>
  //   //js動態添加11個img標簽
  //  //創建11個img標簽的辦法
  //   var box=document.getElementById('box');
  //   for(var i=1;i<=11;i++){//有多少張圖就循環多少次
  //  var imgs= document.createElement('img');
  //  imgs.setAttribute("src", "img/"+i+".jpg");
  //  box.appendChild(imgs);}
        //當頁面加載完畢后再執行代碼
        window.onload=function ( ) {
          //1.獲取元素
          var oWrap=document.getElementById('box');
          var oImg=oWrap.children;
          // var oImgLen=oImg.length;
          var deg=360/oImg.length;//3.每個需要旋轉的度數
          // 定義一個開始的度數
          var roX=-10;
          var roY=0;
          var x,y,x_,y_,xN,yN,time=null;
         //2.遍歷所有的img標簽
          for(var i=0;i<oImg.length;i++){
          // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
            oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
            oImg[i].style.transition ='all 1s '+ (oImg.length-i-1)*0.1 +'s';
            //transition:設置過渡
            oImg[i].ondragstart=function ( ) {
            return false;
          }
          }
          //3.事件處理
          document.onmousedown=function ( e ) {
            clearInterval(time);
            e=e||window.event;
            x_=e.clientX;
            y_=e.clientY;
           // console.log ( "鼠標按下了" )
            this.onmousemove=function ( e ) {
            e=e||window.event;
            //獲取滾動的X和Y軸
              //client:鼠標觸發點相對于頁面可視區域左上角距離
             x=e.clientX;
             y=e.clientY;
              //兩點之間的差值:第一次走的時候兩值相等,第二次走的時候x已經更新,但x_沒更新,所以兩個差值就是xN;
              xN=x-x_;
              yN=y-y_;
              //差值拼接到旋轉的Y里面去
              roY+=xN*0.2;//水平拖影響Y軸;
              roX-=yN*0.2;
              oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
              // var oDiv =document.createElement('div');
              // this.body.appendChild(oDiv);
              // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";
              x_=e.clientX;
              y_=e.clientY;
            }
            this.onmouseup=function ( ) {
             // console.log ( "鼠標抬起了" )
              this.onmousemove= null;
              //設置一個定時器,實現后面慣性效果8
             time=setInterval(function ( ) {
          //無限乘以零點95它會接近0的狀態
            xN*=0.95;
            yN*=0.95;
            //當它小到0.1時停止計時器
            if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回絕對值
              clearInterval(time);
            }
          //差值拼接到旋轉的Y里面去
          roY+=xN*0.2;//水平拖影響Y軸;
          roX-=yN*0.2;
          oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
        },30)
            }
          }
        }
  </script>

附件:完整版代碼

<!DOCTYPE html >
<html lang="en" onselectstart="return false;">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #000;
    }
    #box{
      width:133px;
      height: 200px;
      margin: 100px auto;
      position:relative;
      /* border: 1px solid #fff; 測試用到*/
      transform-style: preserve-3d;
      /*2.transform–style屬性指定嵌套元素是在三維空間中呈現。(使用此屬性必須先使用transform 屬性)*/
      /*perspective:800px;*/
      /*3.設置透視距離*/
      transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;                                                   }
    #box img{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 3px;
      box-shadow: 0px 0px 5px #fff;
      /*4.設置圖片陰影*/
      -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
      /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
      /*5.設置圖片倒影:直接記住吧(3個值。1. direction 定義方向,取值包括 above 、 below 、 left 、 right。);2. offset定義反射偏移的距離;3.mask-box-image定義遮罩圖像,該圖像將覆蓋投影區域。如果省略該參數值,則默認為無遮罩圖像。*/
    }
  </style>
</head>
<body>
<div id="box">
  <img src="./img/1.jpg" >
  <img src="./img/2.jpg" >
  <img src="./img/3.jpg" >
  <img src="./img/4.jpg" >
  <img src="./img/5.jpg" >
  <img src="./img/6.jpg" >
  <img src="./img/7.jpg" >
  <img src="./img/8.jpg" >
  <img src="./img/9.jpg" >
  <img src="./img/10.jpg" >
  <img src="./img/11.jpg" >
  <img src="./img/12.jpg" >
</div>
  <script>
  //   //js動態添加11個img標簽
  //  //創建11個img標簽的辦法
  //   var box=document.getElementById('box');
  //   for(var i=1;i<=11;i++){//有多少張圖就循環多少次
  //  var imgs= document.createElement('img');
  //  imgs.setAttribute("src", "img/"+i+".jpg");
  //  box.appendChild(imgs);}
        //當頁面加載完畢后再執行代碼
        window.onload=function ( ) {
          //1.獲取元素
          var oWrap=document.getElementById('box');
          var oImg=oWrap.children;
          // var oImgLen=oImg.length;
          var deg=360/oImg.length;//3.每個需要旋轉的度數
          // 定義一個開始的度數
          var roX=-10;
          var roY=0;
          var x,y,x_,y_,xN,yN,time=null;
         //2.遍歷所有的img標簽
          for(var i=0;i<oImg.length;i++){
          // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
            oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
            oImg[i].style.transition =' all 1s '+ (oImg.length-i-1)*0.1 +'s';
            //transition:設置過渡
            oImg[i].ondragstart=function ( ) {
            return false;
          }
          }
          //3.事件處理
          document.onmousedown=function ( e ) {
            clearInterval(time);
            e=e||window.event;
            x_=e.clientX;
            y_=e.clientY;
           // console.log ( "鼠標按下了" )
            this.onmousemove=function ( e ) {
            e=e||window.event;
            //獲取滾動的X和Y軸
              //client:鼠標觸發點相對于頁面可視區域左上角距離
             x=e.clientX;
             y=e.clientY;
              //兩點之間的差值:第一次走的時候兩值相等,第二次走的時候x已經更新,但x_沒更新,所以兩個差值就是xN;
              xN=x-x_;
              yN=y-y_;
              //差值拼接到旋轉的Y里面去
              roY+=xN*0.2;//水平拖影響Y軸;
              roX-=yN*0.2;
              oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
              // var oDiv =document.createElement('div');
              // this.body.appendChild(oDiv);
              // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";這三行是測試用的
              x_=e.clientX;
              y_=e.clientY;
            }
            this.onmouseup=function ( ) {
             // console.log ( "鼠標抬起了" )
              this.onmousemove= null;
              //設置一個定時器,實現后面慣性效果8
             time=setInterval(function ( ) {
          //無限乘以零點95它會接近0的狀態
            xN*=0.95;
            yN*=0.95;
            //當它小到0.1時停止計時器
            if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回絕對值
              clearInterval(time);
            }
          //差值拼接到旋轉的Y里面去
          roY+=xN*0.2;//水平拖影響Y軸;
          roX-=yN*0.2;
          oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
        },30)
            }
          }
        }
  </script>
</body>
</html>

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript動畫特效與技巧匯總》、《JavaScript頁面元素操作技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

封丘县| 锡林浩特市| 嘉祥县| 汝南县| 博乐市| 会宁县| 绥中县| 舟山市| 云南省| 临泉县| 遵化市| 翁源县| 高邑县| 岑巩县| 大城县| 普格县| 颍上县| 丰都县| 长乐市| 昌都县| 渝中区| 遂川县| 尚义县| 荔浦县| 四子王旗| 新昌县| 苏州市| 晋城| 江城| 丽江市| 同仁县| 盐津县| 湟中县| 上饶市| 莒南县| 邹城市| 澄迈县| 金川县| 鄄城县| 丰县| 志丹县|