有关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. Monit : 开源监控工具介绍

    · Monit 简介 Monit是一个轻量级(500KB)跨平台的用来监控Unix/linux系统的开源工具.部署简单,并且不依赖任何第三方程序.插件或者库. Monit可以监控服务器进程.文件.文件 ...

  2. every();some();filter();map();forEach()各自区别：

    every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...

  3. asp.net(C#)html无限分类树 可新增 删除 修改

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProductSort.aspx ...

  4. MyServer

    //一.设置一个8089端口的本地IP服务器 1 package myserver; import java.io.IOException; import java.net.ServerSocket; ...

  5. WiFi万能钥匙4.1.32接口

    做Key4WiFi时提取的接口 部分代码来自于 http://zke1ev3n.me/2016/04/06/WiFi%E4%B8%87%E8%83%BD%E9%92%A5%E5%8C%99%E6%8E ...

  6. PHP之回调函数传参(解决eval函数拼接对象参数的问题)

    在使用Smarty时,定义了一个统一调用控制器的函数,如下: function C($name, $method){//控制器的名称和其中方法的名称 require_once "contro ...

  7. windows中vim-airline研究笔记

    vim-airline网上的介绍与安装教程一大堆,我就不累述了 但是,在win下如何让airline插件正常显示箭头等特殊字符着实让我头疼了不少. 最初,我是用的monaco字体 但正如你所见,并没有 ...

  8. Mysql Show ProcessList命令

    每个MySql连接,或者叫线程,在任意一个给定的时间都有一个状态来标识正在进行的事情.可以使用 SHOW [FULL] PROCESSLIST 命令来查看哪些线程正在运行,及其查询状态,Command ...

  9. abapGit简介与教程

    你是ABAP开发者?你用abapGit吗? 看到这个问题,读者也许会想,什么是abapGit?就让我们从这个问题开始.简单地说,abapGit是一个以ABAP写成为ABAP服务的Git客户端. 有的读 ...

  10. LeetCode 628. Maximum Product of Three Numbers （最大三数乘积）

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...