百度建站平台官网,社交媒体平台,网站切换图片做背景怎么写,制作wordpress在使用Google的时候#xff0c;查看某一相册#xff0c;会经常看到#xff0c;如下图所示的动画效果。 鼠标移入、移出时均有动画效果#xff0c;咋一看估计是使用了css3的transform属性来实现动画效果的。 在网上搜索“Google 相册 效果”的时候发现有人使用CSS3做了这样的…在使用Google的时候查看某一相册会经常看到如下图所示的动画效果。 鼠标移入、移出时均有动画效果咋一看估计是使用了css3的transform属性来实现动画效果的。 在网上搜索“Google 相册 效果”的时候发现有人使用CSS3做了这样的效果不过使用调试工具查看节点元素的时候我觉得它是使用JS在进行的控制。所以就用JS顺手写了一个只是demo可能还需要改进。 实例暂时仅支持较新版本的Chrome、Safari、Firefox、Opera其中Safari动画感觉不太流畅所有浏览器中Chrome表现最好示例请使用上述浏览器进行访问演示地址 代码旋转的坐标值都是写死的而google里应该是算出来的这里没有引用其它的js库/框架代码不算多思路算比较简单的有优化的空间有空封装和折腾一下。 完整的示例代码 !DOCTYPE htmlhtmlheadtitleGoogle相册展示/titlemeta namegenerator contenteditplus /meta nameauthor content /meta namekeywords content /meta namedescription content /meta http-equivcontent-type contenttext/html; charsetutf-8 /style typetext/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/headbodybutton onclickopenAnim()执行显示动画/buttonbutton onclickcloseAnim()执行关于动画/buttonspan idtipInfo/spandiv classpw stylewidth: 227px; -webkit-user-select: none; margin:120px; tabindex0 idpicListimg classrK uK vK srchttp://1.meteoric.sinaapp.com/images/IMG_0506.jpg /img classrK uK wK srchttp://1.meteoric.sinaapp.com/images/IMG_0516.jpg /img classrK uK xK srchttp://1.meteoric.sinaapp.com/images/IMG_0548.jpg /img classrK uK yK srchttp://1.meteoric.sinaapp.com/images/IMG_0506.jpg //divdiv classpw idpicContainerimg classrK uK vK srchttp://1.meteoric.sinaapp.com/images/IMG_0506.jpg /img classrK uK wK srchttp://1.meteoric.sinaapp.com/images/IMG_0516.jpg /img classrK uK xK srchttp://1.meteoric.sinaapp.com/images/IMG_0548.jpg /img classrK uK yK srchttp://1.meteoric.sinaapp.com/images/IMG_0506.jpg //divscript typetext/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