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面试题与Javascript词法作用域说明
Nov 09 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 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
php统计文章排行示例
2014/03/04 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python subprocess模块学习总结
2014/03/13 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python每天必学之bytes字节
2016/01/28 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
matplotlib中legend位置调整解析
2017/12/19 Python
浅析python协程相关概念
2018/01/20 Python
python3实现猜数字游戏
2020/12/07 Python
python super的使用方法及实例详解
2019/09/25 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
初中英语教学反思
2014/01/25 职场文书
美术教师岗位职责
2014/03/18 职场文书
保护环境建议书400字
2014/05/13 职场文书
公司建议书怎么写
2014/05/15 职场文书
倡导文明标语
2014/06/16 职场文书
写给导师的自荐信
2015/03/06 职场文书
同意落户证明
2015/06/19 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技