仿Google+相册的动画

在使用Google+的时候，查看某一相册，会经常看到，如下图所示的动画效果。

image

鼠标移入、移出时均有动画效果，咋一看估计是使用了css3的transform属性来实现动画效果的。

在网上搜索“Google+ 相册 效果”的时候发现有人使用CSS3做了这样的效果，不过使用调试工具查看节点元素的时候，我觉得它是使用JS在进行的控制。所以就用JS顺手写了一个，只是demo，可能还需要改进。

实例暂时仅支持较新版本的：Chrome、Safari、Firefox、Opera（其中Safari动画感觉不太流畅，所有浏览器中Chrome表现最好），示例请使用上述浏览器进行访问，演示地址>>

代码旋转的坐标值都是写死的，而google+里应该是算出来的，这里没有引用其它的js库/框架，代码不算多，思路算比较简单的（有优化的空间，有空封装和折腾一下）。

完整的示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Google+相册展示</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />

<style type='text/css'>
    .pw{position:relative;vertical-align:top}
    .pw:active{outline:0}
    .rK{-webkit-box-shadow:0 1px 2px #aaa;-moz-box-shadow:0 1px 2px #aaa;box-shadow:0 1px 2px #aaa;background-color:#fff;border:5px solid #f3f3f3;cursor:pointer}

    .uK{-webkit-box-shadow:1px 1px 2px #666;-moz-box-shadow:1px 1px 2px #666;box-shadow:1px 1px 2px #666;left:0;position:absolute;top:0}

    .vK{z-index:4}
    .wK{transform:translate(5px,1px) scale(.97);z-index:3;-moz-transform:translate(5px,1px) scale(.97);-o-transform:translate(5px,1px) scale(.97);-webkit-transform:translate(5px,1px) scale(.97)}
    .xK{transform:translate(10px,2px) scale(.94);z-index:2;-moz-transform:translate(10px,2px) scale(.94);-o-transform:translate(10px,2px) scale(.94);-webkit-transform:translate(10px,2px) scale(.94)}
    .yK{z-index:1}

    .pw img {width:205px; height:205px;}

    #tipInfo {padding-left:20px;}
    #picContainer {width: 227px; position: absolute; z-index: 5; display:none;}
</style>
</head>

<body>

<button onclick="openAnim()">执行显示动画</button>
<button onclick="closeAnim()">执行关于动画</button>
<span id="tipInfo"></span>

<div class="pw" style="width: 227px; -webkit-user-select: none; margin:120px;" tabindex="0" id="picList">
<img class="rK uK vK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
<img class="rK uK wK" src="http://1.meteoric.sinaapp.com/images/IMG_0516.jpg" />
<img class="rK uK xK" src="http://1.meteoric.sinaapp.com/images/IMG_0548.jpg" />
<img class="rK uK yK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
</div>


<div class="pw" id="picContainer">
<img class="rK uK vK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
<img class="rK uK wK" src="http://1.meteoric.sinaapp.com/images/IMG_0516.jpg" />
<img class="rK uK xK" src="http://1.meteoric.sinaapp.com/images/IMG_0548.jpg" />
<img class="rK uK yK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
</div>



<script type="text/javascript">
   1:  
   2: //style="-webkit-transform: rotate(-6deg) translate(-72px, -4px) scale(1.0414634146341464); "
   3:     
   4: function getEl(id) {
   5:     return typeof id === "string" ? document.getElementById(id) : id;
   6: }
   7: /**
   8: * @fileoverview Tween
   9: */
  10: function Tween(C, B, A) {
  11:     if (C) {
  12:         this.time = parseInt(C * 1000)
  13:     }
  14:     if (B) {
  15:         this.transform = B
  16:     }
  17:     if (A) {
  18:         this.interval = A
  19:     }
  20: }
  21: Tween.prototype = {
  22:     interval: 40,
  23:     duration: 1000,
  24:     transform: function(A) {
  25:         return 1 - Math.pow(1 - A, 3)
  26:     },
  27:     timer: null,
  28:     isRun: false,
  29:     clear: function() {
  30:         if (this.timer) {
  31:             clearInterval(this.timer);
  32:             this.timer = null;
  33:         }
  34:     },
  35:     start: function() {
  36:         this.clear();
  37:  
  38:         this.timer = this._start.apply(this, arguments);
  39:     },
  40:     _start : function(A, E, D) {
  41:         
  42:         D = D || this.transform;
  43:  
  44:         function H() {
  45:             I += C;
  46:             var J = I / F;
  47:             if (J >= 1) {
  48:                 A(1);
  49:                 E && E();
  50:                 clearInterval(B)
  51:             } else {
  52:                 A(D(J) / G)
  53:             }
  54:         }
  55:  
  56:         var C = this.interval;
  57:         var F = this.duration;
  58:         var G = D(1);
  59:         var I = 0;
  60:         var B = setInterval(H, C);
  61:  
  62:         return B;
  63:     }
  64: }
  65:  
  66: function getOffset(el) {
  67:     var elem = getEl(el);
  68:     var l = 0;
  69:     var t = 0;
  70:  
  71:     while (elem) {
  72:         l += elem.offsetLeft;
  73:         t += elem.offsetTop;
  74:  
  75:         elem = elem.offsetParent;
  76:     }
  77:  
  78:     return [l, t];
  79: }
  80:  
  81: var tween = new Tween();
  82: var imgArr = getEl("picContainer").getElementsByTagName("img");
  83: var ua = navigator.userAgent;
  84: var isWebkit = /AppleWebKit/.test(ua);
  85: var isFF = /Firefox/.test(ua);
  86: var isOpera = /Opera/.test(ua);
  87:  
  88: tween.duration = 300;
  89:  
  90: function openAnim() {
  91:     getEl("tipInfo").innerHTML = "";
  92:     getEl("picContainer").style.display = "block";
  93:  
  94:     function M(I) {
  95:         var a = isWebkit ? "WebkitTransform" : "MozTransform";
  96:         a = isOpera ? "OTransform" : a;
  97:  
  98:         imgArr[0].style[a] = "rotate("+ -6 * I +"deg) translate("+ -72 * I +"px, "+ -4 * I +"px) scale(1)";
  99:         imgArr[1].style[a] = "rotate(0deg) translate(0px, "+ -4 * I +"px) scale(1)";
 100:         imgArr[2].style[a] = "rotate("+ 6 * I +"deg) translate("+ 72 * I +"px, "+ 4 * I +"px) scale(1)";
 101:  
 102:         getEl("tipInfo").innerHTML = "显示动画正在执行...";
 103:     }
 104:  
 105:     function N() {
 106:         getEl("tipInfo").innerHTML = "显示动画执行完成";
 107:  
 108:         getEl("picContainer").onmouseout = closeAnim;
 109:         getEl("picList").onmouseover = null;
 110:  
 111:         getEl("picContainer").onmousemove = function() {
 112:             tween.clear();
 113:         }
 114:     }
 115:  
 116:     tween.start(M, N);
 117: }
 118:  
 119: function closeAnim() {
 120:     getEl("tipInfo").innerHTML = "";
 121:  
 122:     function M(I) {
 123:         I = 1 - I;
 124:         
 125:         var a = isWebkit ? "WebkitTransform" : "MozTransform";
 126:         a = isOpera ? "OTransform" : a;
 127:  
 128:         imgArr[0].style[a] = "rotate("+ -6 * I +"deg) translate("+ -72 * I +"px, "+ -4 * I +"px) scale(1)";
 129:         imgArr[1].style[a] = "rotate(0deg) translate("+(5 - 5 * I)+"px, "+ (1 + -5 * I) +"px) scale(0.97)";
 130:         imgArr[2].style[a] = "rotate("+ 6 * I +"deg) translate("+ (10 + 62 * I) +"px, "+ (2 + 2 * I) +"px) scale(0.94)";
 131:  
 132:         getEl("tipInfo").innerHTML = "关闭动画正在执行...";
 133:     }
 134:  
 135:     function N() {
 136:         getEl("tipInfo").innerHTML = "关闭动画执行完成";
 137:  
 138:         getEl("picContainer").style.display = "none";
 139:  
 140:         getEl("picContainer").onmouseout = null;
 141:         getEl("picList").onmouseover = openAnim;
 142:         getEl("picContainer").onmousemove = null;
 143:     }
 144:  
 145:     tween.start(M, N);
 146: }
 147:  
 148: !(function() {
 149:     var arr = getOffset("picList");
 150:     var elem = getEl("picContainer");
 151:  
 152:     elem.style.left = arr[0] + 'px';
 153:     elem.style.top = arr[1] + 'px';
 154:  
 155:     if (!isWebkit && !isFF && !isOpera) {
 156:         var btns = document.getElementsByTagName("button");
 157:         for (var i = 0, len = btns.length; i < len; i++) {
 158:             btns[i].disabled = true;
 159:         }
 160:     } else {
 161:         getEl("picList").onmouseover = openAnim;
 162:     }
 163: })();
 164: 
</script>

</body>
</html>

转载于:https://www.cnblogs.com/meteoric_cry/archive/2012/02/02/2335610.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/302932.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

看见到洞见之引子（二）机器学习算法

看见到洞见之引子（二）机器学习算法

《看见到洞见》系列文章汇聚、分享的是绿盟科技创新中心对于数据分析在安全领域应用的技战术思考与经验&#xff0c;力求由浅入深层次递进&#xff0c;实战到方法论双线剖析。此文为系列文章之引子第二篇&#xff0c;深入浅出的对常用的数据分析和机器学习的算法进行介绍。在上…
阅读更多...
一图看懂 ASP.NET Core 中的服务生命周期

一图看懂 ASP.NET Core 中的服务生命周期

翻译自 Waqas Anwar 2020年11月8日的文章 《ASP.NET Core Service Lifetimes (Infographic)》 [1]ASP.NET Core 支持依赖关系注入&#xff08;DI&#xff09;软件设计模式&#xff0c;该模式允许我们注册服务、控制如何实例化这些服务并将其注入到不同的组件中。一些服务可以在…
阅读更多...
看见到洞见之引子（一）机器学习算法

看见到洞见之引子（一）机器学习算法

《看见到洞见》系列文章汇聚、分享的是绿盟科技创新中心对于数据分析在安全领域应用的技战术思考与经验&#xff0c;力求由浅入深层次递进&#xff0c;实战到方法论双线剖析。此文为系列文章之引子第一篇&#xff0c;深入浅出的对常用的数据分析和机器学习的算法进行介绍。文章…
阅读更多...
支持向量回归代码_RDKit：基于支持向量回归（SVR）预测logP

支持向量回归代码_RDKit：基于支持向量回归（SVR）预测logP

RDKit一个用于化学信息学的python库。使用支持向量回归(SVR)来预测logP。 分子的输入结构特征是摩根指纹&#xff0c;输出是logP。代码示例&#xff1a;#导入依赖库import numpy as npfrom rdkit import Chemfrom rdkit.Chem.Crippen import MolLogPfrom rdkit import Chem, Da…
阅读更多...
移除 ZooKeeper 的 kafka 2.8 ，更快了

移除 ZooKeeper 的 kafka 2.8 ，更快了

这段时间招聘季&#xff0c;后台收到不少关于 Kafka 的问题&#xff0c;确实 Kafka 近两年的行情&#xff0c;可谓是水涨船高了。根本原因是&#xff0c;是 Apache Kafka 作为一款开源的消息引擎系统。凭借高可靠、高吞吐、高可用、可伸缩等优越特性&#xff0c;在数据采集、传…
阅读更多...
浅议SSH协议

浅议SSH协议

什么是SSH&#xff1f; SSH 为 Secure Shell 的缩写&#xff0c;由 IETF 的网络工作小组&#xff08;Network Working Group&#xff09;所制定&#xff1b;SSH 为建立在应用层和传输层基础上的安全协议。SSH 是目前较可靠&#xff0c;专为远程登录会话和其他网络服务提供安全性…
阅读更多...
机器学习 vs 深度学习到底有啥区别，为什么更多人选择机器学习

机器学习 vs 深度学习到底有啥区别，为什么更多人选择机器学习

机器学习和深度学习有什么区别&#xff1f;让我们从本文中寻找答案。目标本文中&#xff0c;我们将深度学习与机器学习作比较。我们将逐一了解他们。我们还会讨论他们在各个方面的不同点。除了深度学习和机器学习的比较&#xff0c;我们还将研究它们未来的趋势。对比介绍深度学…
阅读更多...
dreamweaver连接mysql数据库 发生一个不知名错误_用DREAMWEAVER连接数据库测试时总是弹出发生一个不知名的错误 你好! 请问一下这个问题你是怎么解的?...

dreamweaver连接mysql数据库 发生一个不知名错误_用DREAMWEAVER连接数据库测试时总是弹出发生一个不知名的错误 你好! 请问一下这个问题你是怎么解的?...

展开全部2018年05月05日 19:11:13阅读数&#xff1a;1 编辑如图&#xff0c;PHPMySQLDreamweaverCS6连接MySQL就出现不知名错误&#xff0c;查遍全网也没有解决办法。32313133353236313431303231363533e58685e5aeb931333365653139笔者是机械学的专业&#xff0c;电脑是小白&…
阅读更多...
ASP.Net 管道模型 VS Asp.Net Core 管道 总结

ASP.Net 管道模型 VS Asp.Net Core 管道 总结

1 管道模型 1 Asp.Net Web Form管道请求进入Asp.Net工作进程后&#xff0c;由进程创建HttpWorkRequest对象&#xff0c;封装此次请求有关的所有信息&#xff0c;然后进入HttpRuntime类进行进一步处理。HttpRuntime通过请求信息创建HttpContext上下文对象&#xff0c;此对象将贯…
阅读更多...
py2exe for python3_使用Py2Exe for Python3创建自己的exe程序

py2exe for python3_使用Py2Exe for Python3创建自己的exe程序

最近使用Python 3.5写了一个GUI小程序&#xff0c;于是想将该写好的程序发布成一个exe文件&#xff0c;供自己单独使用。至于通过安装的方式使用该程序&#xff0c;我没有探索&#xff0c;感兴趣的读者可以自己摸索。1 介绍我使用的开发环境是python3.4(实际上我是在另一个64位…
阅读更多...
实际体验SpanT 的惊人表现

实际体验SpanT 的惊人表现

前言最近做了一个过滤代码块功能的接口。就是获取一些博客文章做文本处理&#xff0c;然后这些博客文章的代码块太多了&#xff0c;很多重复的代码关键词如果被拿过来处理&#xff0c;那么会对文本的特征表示已经特征选择会有很大的影响。所以需要将这些代码块的部分给过滤掉。…
阅读更多...
AI人工智能资料分享来袭，还不快来！

AI人工智能资料分享来袭，还不快来！

小天从大学开始&#xff0c;便开启资料收集功能。近几年以AlphaGo为契机&#xff0c;人工智能进入新的发展阶段&#xff0c;再加上日常的深入研究&#xff0c;小天收集整理了丰富的AI学习资料&#xff0c;内容涵盖“深度学习资料包”&#xff0c;“数据挖掘资料包”&#xff0c…
阅读更多...
聊一聊Jmeter的简单使用

聊一聊Jmeter的简单使用

背景 近段时间&#xff0c;团队想补强测试这一块&#xff0c;减少重复性的一些工作&#xff0c;让一些内容可以自动化起来&#xff0c;同时对开发同学写的接口的性能也开始有所要求了。考虑到团队内没有人有测试开发的经验&#xff0c;所以前期的选择还是以工具为主&#xff0c…
阅读更多...
win7录制系统声音 加入立体声混音 camtasia recorder录屏

win7录制系统声音 加入立体声混音 camtasia recorder录屏

很多时候&#xff0c;我们录屏的时候都并不是非得通过麦克风来说话&#xff0c;比如&#xff0c;你想跟好友分享一首歌曲的时候&#xff0c;那么你总不能把麦拿到喇叭那儿录制噻&#xff0c;那样录出来的不仅很麻烦&#xff0c;而且歌曲质量很差&#xff01;那么怎么录制系统正…
阅读更多...
百万大奖参赛攻略 | 让程序员走向财富自由

百万大奖参赛攻略 | 让程序员走向财富自由

还在担忧你的区块链项目曝光量小、品牌商业化进程慢、得不到投资人关注吗&#xff1f;这里有站上巨人肩膀的最全攻略&#xff01;2018年金链盟中国区块链应用大赛&#xff0c;开始向全国企事业单位、科研机构、项目团队、开发者队伍征集应用案例啦&#xff01;想参加的你们&…
阅读更多...
Web通用令牌JwtBuilder

Web通用令牌JwtBuilder

JSON Web Token (JWT)是一个开放标准(RFC 7519)&#xff0c;它定义了一种紧凑的、自包含的方式&#xff0c;用于作为JSON对象在各方之间安全地传输信息。该信息可以被验证和信任&#xff0c;因为它是数字签名的。Nuget包&#xff1a;NewLife.Core、NewLife.Secrurity源码地址&a…
阅读更多...
mysql---复杂的sql语句join的使用（left join,right join）

mysql---复杂的sql语句join的使用（left join,right join）

2019独角兽企业重金招聘Python工程师标准>>> SELECT u.*,count(u.id) AS sum FROM user AS uLEFT JOIN post AS pON p.user_id u.id RIGHT JOIN user_has_group as upON up.user_id u.id RIGHT JOIN user_has_email as ueON ue.user_id u.idWHERE u.username ! A…
阅读更多...
你真的不了解这个地球

你真的不了解这个地球

全世界有3.14 % 的人已经关注了数据与算法之美1. 首先来看看地球&#xff0c;看起来不错哟&#xff0c;地球&#xff5e;2. 图中圈圈里头的人口&#xff0c;比其他地区的所有总和都还要多。3. 以整个地球史来看&#xff0c;曾活过的人类高达1150亿人&#xff0c;其中包括现存的…
阅读更多...
Squid反向代理加速缓存+负载均衡实验架构

Squid反向代理加速缓存+负载均衡实验架构

实验环境&#xff1a; 公司有两台web服务器&#xff0c;运行同一套网站&#xff0c;读取同一台mysql数据库。 两台web服务器的主机名如下&#xff1a; test1.com 192.168.1.119 test2.com 192.168.1.120 squid服务器ip&#xff1a;192.168.1.123 DNS: 192.168.9.254 实验思路&a…
阅读更多...
levedb 导入 mysql_LevelDB-初始篇

levedb 导入 mysql_LevelDB-初始篇

简介&#xff1a;LevelDB是一个基于本地文件的存储引擎&#xff0c;非分布式存储引擎&#xff0c;原理基于BigTable(LSM文件树)&#xff0c;无索引机制&#xff0c;存储条目为Key-value。适用于保存数据缓存、日志存储、高速缓存等应用&#xff0c;主要是避免RPC请求带来的延迟…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023