有关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系列之五：crontab使用详解和Linux的进程管理以及网络状态监控

    一.crontab使用详解 概述:任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类: (1)系统工作:有些重要的工作必须周而 复始地执行. (2)个别用户工作:个别用户可能希望执 行 ...

  2. 实现mysql在windows server 2008下自动备份

    环境:MySQL   安装位置:D:\MySQL论坛数据库名称为:Db_Test数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ********************** ...

  3. 【JAVA零基础入门系列】Day8 Java的控制流程

    什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...

  4. 压缩SQLServer数据库日志的一个存储过程

    use master --注意,此存储过程要建在master数据库中 go if exists (select * from dbo.sysobjects where id = object_id(N ...

  5. 读Zepto源码之Stack模块

    Stack 模块为 Zepto 添加了 addSelf 和 end 方法. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 ...

  6. cocos2dx - 环境配置，项目创建

    准备工具 cocos2dx当前最新版本:v3.9       官网下载地址: http://www.cocos.com/download/ python 2.7x最新版本:2.7.11       官 ...

  7. 【特效】体验很好的导航hover效果移出恢复当前位置

    很常见的一种导航的hover效果,鼠标放上后除了正常的hover,在移出整个导航后,会恢复当前栏目的特殊样式,分别有横向和纵向的导航.代码也比较简单,设置一个当前栏目的class,用index()找到 ...

  8. 【解决方案】客户端请求数据较大时，nginx返回数据被截断

    [问题描述]:客户端使用curl命令向nginx请求数据,当返回数据量较大时,数据被截断,客户端无法获取完整的数据. [问题原因]:nginx配置文件中包含了proxy_buffer_size.pro ...

  9. win10 uwp 绑定静态属性

    Jasoon 大神问,如何绑定静态属性. 我们经常有静态属性,那么我们如何绑定 假如我们的ViewModel有一个静态属性 public static string CVTE { set; get; ...

  10. hdu4821 String

    您也可以在我的个人博客中阅读此文章:跳转 题意 一个字符串S 问其中有几个子串能满足以下条件:1.长度为m*l2.可以被分成m个l长的不同的子串问题就变成了如何快速的判断着m个子串是否存在相同的 思路 ...