标签：
我写了一个弹出层的功能
1 // index animate 2 function autoanimate(){ 3 var nav = document.getElementsByClassName(‘nav‘)[0]; 4 var main = document.getElementsByClassName(‘main‘)[0]; 5 var main_list_createform = document.getElementsByClassName(‘main_list_createform‘)[0]; 6 var alertForm = document.getElementsByClassName(‘alertForm‘)[0]; 7 var alert_right_btn_close = document.getElementsByClassName(‘alert_right_btn_close‘)[0]; 8 9 main_list_createform.onclick = function(){ 10 nav.style.transition = ‘all 0.6s ease‘; 11 nav.style.opacity = ‘0‘; 12 13 main.style.transition = ‘all 0.6s ease‘; 14 main.style.transform = ‘translate(0px, 100px)‘; 15 main.style.opacity = ‘0‘; 16 17 alertForm.style.transition = ‘all 0.6s ease‘; 18 alertForm.style.transform = ‘scale(1, 1)‘; 19 alertForm.style.opacity = ‘1‘; 20 alertForm.style.zIndex = ‘999‘; 21 }; 22 23 alert_right_btn_close.onclick = function(){ 24 nav.style.transition = ‘all 0.6s ease‘; 25 nav.style.opacity = ‘1‘; 26 27 main.style.transition = ‘all 0.6s ease‘; 28 main.style.transform = ‘translate(0px, 0px)‘; 29 main.style.opacity = ‘1‘; 30 31 alertForm.style.transition = ‘all 0.6s ease‘; 32 alertForm.style.transform = ‘scale(0, 0)‘; 33 alertForm.style.opacity = ‘0‘; 34 }; 35 } 36 autoanimate();
上面一个几个不好的地方，
[1] 声明多个变量时，单独声明的
[2] 给元素添加css样式的时候，添加的事行内样式
下面是我优化的代码
1 /* 首页弹出层动画 2 * 功能：[1]点击触发按钮时，将弹出层显示出来，并放大 3 * [2]点击触发按钮时，将导航菜单隐藏，取消时显示 4 * [3]点击触发按钮时，将主内容区下移80，并且透明度为0，取消显示 5 */ 6 window.onload = function() { // 加载后执行 7 var alertForm = document.getElementsByClassName(‘alertForm‘)[0], // 弹出层容器 8 createForm = document.getElementsByClassName(‘main_list_createform‘)[0]; // 创建新表单容器 9 closeAlertForm = alertForm.getElementsByClassName(‘alert_right_btn_close‘)[0], // 取消弹出层按钮 10 nav = document.getElementsByClassName(‘nav‘)[0], // 导航菜单 11 main = document.getElementsByClassName(‘main‘)[0]; // 主内容区 12 13 // 点击触发时，将透明度调到1，大小增大两倍 14 createForm.onclick = function() { 15 alertForm.className = ‘alertForm alertFormShow‘; 16 nav.className = ‘nav navHide‘; 17 main.className = ‘main mainHide‘; 18 19 } 20 21 // 点击取消时，将透明度调到0，大小调到0 22 closeAlertForm.onclick = function() { 23 alertForm.className = ‘alertForm alertFormHide‘; 24 nav.className = ‘nav‘; 25 main.className = ‘main‘; 26 } 27 }
优化的方法：
[1] 在声明多个变量时，可以通过一个var来声明，多个变量之间可以用逗号隔开
[2] 在使用js给元素添加样式的时候，一般不要添加行内样式，因为这样会违背分离的原则，不好维护
[3] 注释一定要写清楚，这样自己更能理解代码的意思，而且以后其他人员来接管维护的时候，会更加容易一些
然后我使用jquery重写了一下这个功能，因为jquery内置了很多不错的功能函数，所以代码显得比较小，且工作量也大大减少了
下面是jquery的代码
1 /* 首页弹出层动画 2 * 功能：[1]点击触发按钮时，将弹出层显示出来，并放大 3 * [2]点击触发按钮时，将导航菜单隐藏，取消时显示 4 * [3]点击触发按钮时，将主内容区下移80，并且透明度为0，取消显示 5 */ 6 $(function() { 7 // 点击触发时，将透明度调到1，大小增大两倍 8 $(‘.main_list_createform‘).on(‘click‘, function() { 9 $(‘.alertForm‘).removeClass(‘alertFormHide‘).addClass(‘alertFormShow‘); 10 $(‘.nav‘).addClass(‘navHide‘); 11 $(‘.main‘).addClass(‘mainHide‘); 12 }); 13 14 // 点击取消时，将透明度调到0，大小调到0 15 $(‘.alert_right_btn_close‘).on(‘click‘, function() { 16 $(‘.alertForm‘).removeClass(‘alertFormShow‘).addClass(‘alertFormHide‘); 17 $(‘.nav‘).removeClass(‘navHide‘); 18 $(‘.main‘).removeClass(‘mainHide‘); 19 }); 20 });
代码是减少了很多，工作量也减少了，但是各位前端的伙伴们，要记得，多去学学原生会使你对代码的理解更深刻，让你写的代码更加有条理，效率更高
标签：
原文地址：http://www.cnblogs.com/kPedestrian/p/4650613.html
