jquery+CSS3实现3D拖拽相册效果


Posted in Javascript onJuly 18, 2016

很久之前练习过的一个实践,复习完渐变、圆角、3D变形、拖拽等等来看源码,估计还不会太凌乱(◎?◎)哈哈哈

效果图:

jquery+CSS3实现3D拖拽相册效果

HTML:

<!doctype html>
<html onselectstart="return false;" lang="en"><!-- !important -->
<head>
  <meta charset="UTF-8">
  <title>3D拖拽相册</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <!-- html上阻止默认行为onselectstart -->
  <div class="pic">
    <img src="images/1.jpg" />
    <img src="images/2.jpg"/>
    <img src="images/3.jpg" />
    <img src="images/4.jpg" />
    <img src="images/5.jpg" />
    <img src="images/6.jpg" />
    <img src="images/7.jpg" />
    <img src="images/8.jpg" />
    <img src="images/9.jpg" />
    <img src="images/10.jpg" />
    <img src="images/11.jpg" />

    <p></p>
  </div>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

CSS:

*{margin:0;padding:0;}
body,html{background:#000;}
.pic{
  width:120px;height:180px;
  margin:150px auto 0;
  border:1px solid red;
  position:relative;
  transform-style:preserve-3d;/*设置3D环境*/
  /*perspective:800px;不用这个*/
  transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
}
.pic img{
  position:absolute;
  height:100%;width:100%;
  border-radius:5px;
  box-shadow:0 0 10px #fff;
  /*背景渐变效果!important*/
  -webkit-box-reflect:below 10px
  -webkit-linear-gradient(top,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%);
}
.pic p{
  width:1200px;height:1200px;
  /*放射性背景渐变*/
  background:
  -webkit-radial-gradient(center center,400px 400px,rgba(255,255,255,0.2),rgba(0,0,0,0));
  position:absolute;
  left:50%;top:100%;
  /*往回移动位置*/
  margin-left:-600px;
  margin-top:-600px;
  transform:rotateX(90deg);
  border-radius:600px;
}

 JQ:

$(function(){
  var imgL=$("div.pic img").size();//获取到图片总数
  // alert(imgL);
  var deg=360/imgL;//每张图片需要旋转的角度
  var roY=0,roX=0;//定义父盒子旋转初始值
  var xN,yN;//定义当前点击处的坐标和前一坐标的距离差
  var play;//定义定时器
  $("div.pic img").each(function(i){
    //设置每张图片 的3D位置
    $(this).css({"transform":"rotateY("+i*deg+"deg) translateZ(350px)"});
    $(this).attr("ondragstart","return false");//每张图片都禁止拖拽
  });
  $(document).mousedown(function(ev){
    //每次都先清除定时器,防止混乱
    clearInterval(play);
    //获取当前点击处的坐标
    var x_=ev.clientX;
    var y_=ev.clientY;
    $(this).bind("mousemove",function(ev){
      //获取移动后的坐标
      var x=ev.clientX;
      var y=ev.clientY;
      //获取移动后,当前坐标和前一坐标的距离差
      xN=x-x_;
      yN=y-y_;
      //将距离差转变为容器旋转的数值
      roY+=xN*0.2;
      roX-=yN*0.1;
      /*$("body").append("<div style='background:red;width:5px;height:5px;position:absolute;top:"+y+"px;left:"+x+"px;'></div>");
此处为方便看到效果*/
      $("div.pic").css({
        "transform":"perspective(800px) rotateY("+roY+"deg) rotateX("+roX+"deg)"
      });
      //将移动后的点设为前一点存放到x_,y_变量中
      x_=ev.clientX;
      y_=ev.clientY;
    })
  }).mouseup(function(){
    //鼠标抬起时,解绑鼠标移动事件
    $(this).unbind("mousemove");
    //鼠标抬起时候,实现惯性缓冲效果
    play=setInterval(function(){
      //将距离插值慢慢变小,实现惯性缓冲
      xN*=0.95;
      yN*=0.95;
      //向左拖动的时候,当前点与前一点的距离差是负值的,要取绝对值
      //停止惯性
      if(Math.abs(xN)<1&&Math.abs(yN)<1){
        clearInterval(play);
      }
      //将距离差转为旋转角度
      roY+=xN*0.2;
      roX-=yN*0.1;
      $("div.pic").css({
        "transform":"perspective(800px) rotateY("+roY+"deg) rotateX("+roX+"deg)"
      });
    },30);
  })
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 两个字符串时间的天数差计算
Aug 25 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
token 机制和实现方式
Dec 15 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 #Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 #Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 #Javascript
JS HTML5拖拽上传图片预览
Jul 18 #Javascript
jQuery 操作input中radio的技巧
Jul 18 #Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 #Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 #Javascript
You might like
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
PyCharm代码格式调整方法
2018/05/23 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
django rest framework 自定义返回方式
2020/07/12 Python
详解python内置模块urllib
2020/09/09 Python
10个顶级Python实用库推荐
2021/03/04 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
《桥》教学反思
2014/04/09 职场文书
安全生产演讲稿
2014/05/09 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
房屋所有权证明
2015/06/19 职场文书
教师岗位说明书
2015/09/30 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
golang为什么要统一错误处理
2022/04/03 Golang