有关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. angualrJs清除定时器

    angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里 ...

  2. HDU3844Tour （好题）

    题意:   有N个点,M个单向边,现在要你设计N条路线覆盖所有的点,每个点都属于且值属于一个环.(为什么是N条边:和最小生成树为什么有N-1条边是一样的证明). 解析:  每个点都有一个喜欢对象(出度 ...

  3. MVC使用jQuery从视图向控制器传递Model,数据验证,MVC HTML辅助方法小结

    //MVC HTML辅助类常用方法记录 (1)@Html.DisplayNameFor(model => model.Title)是显示列名, (2)@Html.DisplayFor(model ...

  4. WPF Popup全屏 弹出方法。解决只显示75%的问题。

    WPF Popup全屏 弹出方法.解决只显示75%的问题.   WPF 中 Popup 有一个特点.当Popup的高度超过屏幕的75%的时候,只显示75%的高度. 如下代码: <Window x ...

  5. KMP算法实践与简单分析

    一.理解next数组 1.约定next[0]=-1,同时可以假想在sub串的最前面有一个通配符"*",能够任意匹配.对应实际的代码t<0时的处理情况. 2.next[j]可以 ...

  6. multiprocessing模块

    multiprocessing模块 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程. multiproce ...

  7. Python线程的常见的lock

    IO阻塞分析: 下面该需求很简单将一个数值100做自减处到0.主函数中有0.1秒的IO阻塞 import threading import time def sub(): global num # 掌 ...

  8. springCloud四：熔断器ribbon--Hystrix

    注:前文概念部分摘抄自博客园  纯洁的微笑 熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩 ...

  9. HttpComponents 发送post get 请求

    1.场景描述 使用Apache开源组织中的HttpComponents,完成对http服务器的访问功能. 2.HttpComponents项目的介绍 HttpComponents项目就是专门设计来简化 ...

  10. 关于celery django django-celery版的搭配的报错问题及解决方法

    G:\python3_django\DFpro\mypro (win)(py3_django) λ python manage.py celery worker --loglevel=infoTrac ...