有关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. Ubuntu安装opencv3.x系列

    p { margin-bottom: 0.25cm; direction: ltr; color: rgb(0, 0, 0); line-height: 120% } p.western { font ...

  2. js X年X周 转成 具体日期

    function getWeekDate(theyear,weekcount) { var year = theyear; var week = weekcount; if(year=="& ...

  3. Python实战之set学习笔记及简单练习

    ['__and__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__' ...

  4. ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL&EF

    本章将介绍如何通过Entity Framework来使用My SQL,之前介绍EF时介绍了provider这个配置项,而且也介绍了在ASP.NET访问MySQL数据仍然是通过ADO.NET,不同的地方 ...

  5. 一个scrapy框架的爬虫(爬取京东图书)

    我们的这个爬虫设计来爬取京东图书(jd.com). scrapy框架相信大家比较了解了.里面有很多复杂的机制,超出本文的范围. 1.爬虫spider tips: 1.xpath的语法比较坑,但是你可以 ...

  6. python爬虫之爬取百度图片

    ##author:wuhao##爬取指定页码的图片,如果需要爬取某一类的所有图片,整体框架不变,但需要另作分析#import urllib.requestimport urllib.parseimpo ...

  7. exp3.1实现顺序栈的各种操作

    #include<iostream>using namespace std;#include<malloc.h>typedef char Elem;typedef struct ...

  8. MySQL存储过程/存储过程与自定义函数的区别

    语法: 创建存储过程: CREATE [definer = {user|current_user}] PROCEDURE sp_name ([ proc_parameter [,proc_parame ...

  9. uva1629,Cake Slicing,记忆化搜索

    同上个题一样,代码相似度极高,或者说可以直接用一个模板吧 dp[i,j,p,q]表示一块长为j-i+1,宽为q-p+1,左上角在位置(i,j)上的蛋糕,dp[]表示当前状态下的最优值,然后对该块蛋糕枚 ...

  10. JAVA判断文件的内容类型

    Java 7 新的特性,判断文件的内容类型. Program to demonstrate Java 7 new feature : Determining the file content type ...