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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php实现计数器方法小结
2015/01/05 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP7内核之Reference详解
2019/03/14 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python框架flask表单实现详解
2019/11/04 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
python exit出错原因整理
2020/08/31 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
专业求职信撰写要诀
2014/02/18 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书