在使用Google+的時候,查看某一相冊,會經常看到,如下圖所示的動畫效果。
鼠標移入、移出時均有動畫效果,咋一看估計是使用了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>