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>

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

Javascript 相关文章推荐
js导出格式化的excel 实例方法
Jul 17 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
简单理解vue中Props属性
Oct 27 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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
You might like
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP处理会话函数大总结
2015/08/05 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php组合排序简单实现方法
2016/10/15 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
浅谈django中的认证与登录
2016/10/31 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python处理Excel文件实例代码
2017/06/20 Python
python2 与python3的print区别小结
2018/01/16 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
生产文员岗位职责
2014/04/05 职场文书
企业文化理念标语
2014/06/10 职场文书
大学生心理活动总结
2014/07/04 职场文书
干部培训简讯
2015/07/20 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
为Java项目添加Redis缓存的方法
2021/05/18 Redis