有关3D相册的制作主要包括以下几个知识点：

1、有关图片的位置摆放，也就是一个相对定位绝对定位的使用；

2、有关CSS3中transform属性的使用（transform-style: preserve-3d）；

3、jquery.js中对鼠标事件的一些处理和鼠标位置的获取。

下面详细介绍有关3D相册的一个简易实现过程：

一、首先我们定义好一个盒子div，在这个里面用来存放我们图材，一开始是处于重合状态如下：

后面将相应的照片进行一个位置的摆放，也就是说转换成3d的状态给人空间的感觉，这里主要是使用transform-style: preserve-3d样式属性来实现的。

二、其中中间的红框是一开始的基准，作为一个参考，在这个模块我们对每张图片都是使用transform：rotateY(360/n deg),但是我们总不可能对每张图片都加一个style样式，这样代码就显得很没有张力，要是出现100张图片的话我们复制工作了是不是有点大？所以这个地方我们用到了jquery.js这个框架，具体实现如下定义一个i变量让其与度数存在一个转换，从而使得代码实现更具兼容性。

在这个里面讲到了一个jquery.js的方法链的使用，为啥这么用大家可以自己百度下（之前面试遇到过这个问题），后面attr是去除鼠标拖拽图片拉出的效果也是为了方便实现旋转功能。

三、当你发现所有的布局都OK得时候我们就要去想3D显示Ok了怎么实现鼠标拖拽后仍有3d的效果？

这个时候我们就要对鼠标进行一个默认绑定事件的解除，众所周知，当按住鼠标左键时候去选择图片或文字时候都会有复制的效果，在这个3D实现的时候我们应该去除这个绑定，是故我们可以通过在<html onselectstart="return false">加这么一句话，还有就是一个图片拖拽的效果去除，如二中讲到的代码.attr内容里所写。

在这两个效果去除之后我们就开始在JS这个模块中写鼠标的三个功能事件：鼠标点击（mousedown）、鼠标移动（mousemove）、鼠标抬起（mouseup）.

在鼠标点击和移动事件中增加视图角度的改变，是故需要定义相关鼠标开始位置和结束位置坐标（x,y）(x_,y_);具体的值是通过内部ev参数获取的，然后通过首尾位置的变化快慢决定3D相册旋转快慢具体代码实现如下：

四、在实现这些功能之后我们可以自己加一个惯性效果进去，其中的实现原理和拽动一样，也是通过对应位置改变量的值来体现的，在xy改变量上分别乘以一个0.95的系数（因为一个数乘与它最后会趋向0），定义一个play事件，当改变率小于0.5的时候停止惯性，从而达到一个转动后惯性的效果。具体代码实现如下：

其中核心实现代码都已经列出，如有不当之处还望提出宝贵意见。

使用Jquery.js框架和CSS3实现3D相册的制作的更多相关文章

  1. Jquery js框架使用

    jquery  众所周知 ,强大的 js框架 自己使用的一些笔记 //1.json格式定义方法 var product_obj={    check_init:function(){          ...

  2. css3+jquery+js做的翻翻乐小游戏

    主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...

  3. js和CSS3炫酷3D相册展示

    <!doctype html> <html> <head> <meta charset="UTF"> <title>js ...

  4. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  5. js框架封装，模拟jQuery封装

    模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...

  6. 媲美jQuery的JS框架——AngularJS（一）

    前言 相信原生JS大家都不陌生,至于为什么说原生,是因为在JS的基础上衍生出了很多的框架.有些框架的使用非常广泛,甚至已经达到了媲美原生的地步.在之前的文章中给大家介绍了jQuery这一介绍框架.今天 ...

  7. jQuery与别的js框架冲突

    jQuery.noConflict()运行这个函数将变量$的控制权让渡给第一个实现它的那个库. 这有助于确保jQuery不会与其他库的$对象发生冲突. <script type="te ...

  8. HBuilder支持jquery、zepto、angular、ext、dojo 等js框架的提示吗

    HBuilder有通行的js扫描分析提示,大部分js库都可以方便的提示.但js是一门超级灵活的语言,通行分析有时分析的不够完美,如果对框架做单独优化配置,可以有更好的提示.DCloud官方对jquer ...

  9. 基于CSS3和jQuery实现的3D相册

    天我们再来看一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧. 在线预览   源码下载 实现的代码: <div c ...

随机推荐

  1. .Neter玩转Linux系列之二：Linux下的文件目录及文件目录的权限

    一.Linux下的文件目录 简介:linux的文件系统是采用级层式的树状目录结构,在此 结构中的最上层是根目录“/”,然后在此目录下再创建 其他的目录.深刻理解linux文件目录是非常重要的,如下图所 ...

  2. C#取得站点跟目录

    string strServer = "http://" + Request.ServerVariables["SERVER_NAME"].ToString() ...

  3. Js全选 添加和单独删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. VB6文件操作自定义函数合集之一

    '--与文件及文件夹操作相关的函数 '--必须引用FSO的ACTIVE OBJECT Dim strList As String '--列表串,返回文件列表 '================ '-- ...

  5. Linux-问题集锦(1)

    一. 某用户只读特定文件夹 只读目录 :  /home/www/yqz/logs 1.  创建用户        useradd ReadOnly        passwd ReadOnly 2. ...

  6. 浅谈oracle树状结构层级查询之start with ....connect by prior、level及order by

    浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...

  7. 解决Ubuntu中phpmyadmin对数据上传上限2M

    本文部分参考自:http://www.myhack58.com/Article/sort099/sort0102/2011/29396.htm 原文有少量错误或者过时的(相对于ubuntu15来说)内 ...

  8. C++开发象棋一 绘制棋盘

    这是我要和大家分享的基于C++和MFC开发的一个象棋程序,目的是练习编程实践和大家分享同时希望大家能给出指教. 进入主题 一.棋盘分析 这是我绘制的棋盘,棋盘的组成由9条竖线和10条横线构成.这儿我们 ...

  9. iOS 之GCD串行和并发队列的理解

    dispatch_queue_t serialQueue = dispatch_queue_create("com.lai.www", DISPATCH_QUEUE_SERIAL) ...

  10. hadoop集群服务器配置注意事项

    1.使用root账户,一劳记逸,远离权限问题. 2.关闭防火墙,命令:service iptables stop 想永久关闭,命令为:chkconfig iptables off 查看防火墙状态,命令 ...