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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
js读取注册表的键值示例
Sep 25 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
理解javascript正则表达式
Mar 08 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
ant-design-vue按需加载的坑的解决
May 14 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php查询及多条件查询
2017/02/26 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
详解JavaScript中return的用法
2017/05/08 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python关闭windows进程的方法
2015/04/18 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python调用其他文件函数或类的示例
2019/07/16 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
档案室主任岗位职责
2014/02/12 职场文书
实习推荐信
2014/05/10 职场文书
社团活动总结书
2014/06/27 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
python中%格式表达式实例用法
2021/06/18 Python
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL