编程 Javascript

js实现3D图片环展示效果

Posted in Javascript onMarch 09, 2017

可对整体进行拖拽

效果图：

js实现3D图片环展示效果

代码如下：

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现3D图片环展示效果

- Author -

shangpudxd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ExtJS扩展垂直tabLayout实现代码

Jun 21 Javascript

Javascript学习笔记-详解in运算符

Sep 13 Javascript

使用javascript实现简单的选项卡切换

Jan 09 Javascript

js对象基础实例分析

Jan 13 Javascript

javascript实现根据iphone屏幕方向调用不同样式表的方法

Jul 13 Javascript

详解JavaScript的回调函数

Nov 20 Javascript

javascript实现label标签跳出循环操作

Mar 06 Javascript

微信小程序在线支付功能的实现

Mar 14 Javascript

详解Vue一个案例引发「内容分发slot」的最全总结

Dec 02 Javascript

在微信小程序中使用vant的方法

Jun 07 Javascript

详解如何使用React Hooks请求数据并渲染

Oct 18 Javascript

JavaScript实现九宫格拖拽效果

Jun 28 Javascript

Vue监听数组变化源码解析

Mar 09 #Javascript

Node.js通过身份证号验证年龄、出生日期与性别方法示例

Mar 09 #Javascript

基于jQuery实现一个marquee无缝滚动的插件

Mar 09 #Javascript

jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

Mar 09 #Javascript

js实现显示手机号码效果

Mar 09 #Javascript

jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】

Mar 09 #Javascript

javascript 秒表计时器实现代码

Mar 09 #Javascript