菜鸟笔记—简单的菜单弹出事件和CSS3动画属性

现如今网页的布局可谓是种类繁多，花样十足，但是万变不离其宗，布局再怎么好都离不开那些基础的样式。今天就来说一下在网页中常见的鼠标移入后显示菜单，鼠标移出后菜单是如何隐藏的。首先得自己安排一个菜单(不是只有菜单能用)，这里对菜单有几点要求：得有固定的位置(最好使用position属性)，样式完成后必须使用display属性的none值将样式隐藏起来，可以像这样：

有显示的方法，相对的就要有隐藏的方法。这个方法很简单就是通过这个获取到的ID，改变带有这个ID的样式的display属性来控制这个菜单的显示和隐藏。

具体的JavaScript脚本如下：

var menu = document.getElementById("menu");//菜单
var menuBtn = document.getElementById("menuBtn");//查看菜单按钮
//菜单的显示和隐藏
tabBtn.onmouseover = function () { //鼠标移入菜单显示
  menu.style.display="block";
};
tabBtn.onmouseout = function () { //鼠标移出菜单隐藏
  menu.style.display="none";
};

JQuery：

$(# menuBtn) . mouseover(function () {
  menu.style.display="block";
}
$(# menuBtn) . mouseout (function () {
  menu.style.display=" none ";
}

 

接下来聊聊css3中的动画属性，动画由两类属性构成@keyframes和animation，只是目前的浏览器大多不支持@keyframes属性，火狐的私有的动画属性是@-moz-keyframes，Opera(欧朋)的是@-o-keyframes，Safari和Chrome支持的是@-webkit-keyframes。@keyframes属性可以创建动画。@keyframes创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，可以多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0%是动画的开始时间，100%是结束动画的时间，应该始终定义 0% 和 100% 选择器。

//@keyframes的语法
@keyframes name
{
  0% {这里写CSS样式}
  50% {这里写CSS样式}
  100% {这里写CSS样式}
}
@keyframes name
{
  from {top:0px; left:0px;}//开始的位置
  to {top:0px; left:0px;}//结束的位置
}

animation是一个复合属性，由六个子属性构成：animation-name规定需要绑定到选择器的@keyframe名称，animation-duration规定完成动画所需的时间，以秒或毫秒计，animation-timing-function规定动画的速度曲线，animation-delay规定在动画开始之前的延迟，animation-iteration-count规定应该播放的次数，animation-direction规定了将动画是否应该轮流反向播放。

//animation语法：
animation: name duration timing-function delay iteration-count direction;

具体的使用方法，可以直接复制粘贴使用：

div
{
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 0.1s linear infinite alternate;/*依次是绑定到div的@keyframe名称 动画时间 速度曲线 规定动画无限次播放 轮流反向运动*/
  -webkit-animation: mymove 0.1s infinite alternate; /*Safari和谷歌的私有属性*/
}
@keyframes mymove
{
  from {top:50px; left:50px;}
  to {top:50px; left:450px;}
}
@-webkit-keyframes mymove /*Safari和谷歌的私有属性*/
{
  from {top:50px; left:50px;}
  to {top:50px; left:450px;}
}