| css滑动动画 | 您所在的位置：网站首页 › css动画图片左右滑动 › css滑动动画 |
css滑动动画
|
2019独角兽企业重金招聘Python工程师标准>>> 先看效果，用谷歌或火狐，你懂的》传送门《 简易的滑动，做起来只要几句话而已。 让我们先来看看HTML骨架是个什么样子。 split home hall user this is home this is hall this is user为了方便解释，我把CSS, HTML, JS分开了，算是个好习惯吧。 三个button是必须的。然后这三个div对应三个button。感觉这解释有点多余（==） 好了，现在我们要给HTML上样式了。 首先是给div统一大小 .page { position: absolute; top: 50px; width: 100%; height: 100%; transform: translate3d(0, 0, 0); }据说加了这个transform: translate3d(0, 0, 0);的话会调用硬件加速，出于心理作用我加上了。宽和高设为100%这样就能整个页面跳转了（视觉上）。 然后就是做这几个页的先后顺序了。 .first { left: 0px; opacity: 1; } .other { left: 100%; opacity: 0; }展现出来的页是放在最左边的，要隐藏的就放在最右边，距离刚好是body的宽度。加个透明度，切换的时候感觉会很高级。当然这不是个好的做法，兼容性不是很好。 ↓下面的这个是跨浏览器的做法。 .transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ }现在说到重点了，就是这个东西是怎么动起来的。 .transition { transition: all 0.5s ease-out; }OK，这个属性的左右就是对变化的属性进行渐变。 好了，接下来就是切换class了。 var main = (function(w, d, $, undefined){ var list = _$('.page') || []; var homebutton = _$('#homebutton'); var hallbutton = _$('#hallbutton'); var userbutton = _$('#userbutton'); homebutton.onclick = function(){ get_this_page(list, "#homepage"); }; hallbutton.onclick = function(){ get_this_page(list, "#hallpage"); }; userbutton.onclick = function(){ get_this_page(list, "#userpage"); }; homebutton.click(); function get_this_page(nodelist, string){ nodelist.forEach(function(x, i, a){ x.className = "page transition other"; }); _$(string).className = "page transition first"; return true; } function _$(string) { var first_char = string.substr(0,1); if(first_char == ".") { var list = d.getElementsByClassName(string.substring(1)); var nodelist = []; for (var i = list.length - 1; i >= 0; i--) { nodelist[i] = list[i] } return nodelist; } else if(first_char == "#"){ var id = string.substring(1); return d.getElementById(id); } } })(window, document, $);其中主要的就是一个函数。 function get_this_page(nodelist, string){ nodelist.forEach(function(x, i, a){ x.className = "page transition other"; }); _$(string).className = "page transition first"; return true; }剩下的就还凑乎吧，感觉nodelist这个东西还是蛮神奇的，谁要是有详细的资料麻烦给我个链。 |
【本文地址】
公司简介
联系我们