主页 > 前端开发 > Html+css > 正文

动画特效导航菜单--人物表情自动变换

时间:2014-01-29所属栏目: Html+css 来源: 热度:

这是一个简单的人物表情特效菜单，人物表情自动或根据鼠标滑动变化，一个简单又有趣的css3+jquery+html5的导航菜单效果。

Demo

html部分

 <div class="constraint">
  
  <section class="branding">
  <span class="avatar"></span>
  </section>
 
  <nav id="navigation" class="clearfix">
  <ul>
  <li class="link-work avatar-happy"><a href="#work">WORK</a></li>
  <li class="link-about avatar-wink"><a href="#about-me">ABOUT ME</a></li>
  <li class="link-contact avatar-surprised"><a href="#contact">CONTACT</a></li>
  </ul>
 </nav>
  </div>

.avatar类是头像变化部分。

js部分

$(document).ready(function() {
$(".avatar-wink").hover(function() {
hover = true
},
function() {
hover = false
});
$('.avatar-happy').hover(function() {
$('.avatar').css('background-position', '-230px 0px')
},
function() {
$('.avatar').css('background-position', '0px 0px')
});
$('.avatar-surprised').hover(function() {
$('.avatar').css('background-position', '-345px 0px')
},
function() {
$('.avatar').css('background-position', '0px 0px')
});
$('.avatar-wink').hover(function() {
$('.avatar').css('background-position', '-460px 0px')
},
function() {
$('.avatar').css('background-position', '0px 0px')
});
$('.avatar-sad').hover(function() {
$('.avatar').css('background-position', '-680px 0px')
},
function() {
$('.avatar').css('background-position', '0px 0px')
});
hover = false;
closeEyes()
});
function closeEyes() {
if (hover == false) {
$('.avatar').css('background-position', '-115px 0px')
}
setTimeout('openEyes()', 500)
}
function openEyes() {
if (hover == false) {
$('.avatar').css('background-position', '0px 0px')
}
setTimeout('closeEyes()', 6000)
}
Demo

会点js的朋友一看都能明白，主要closeEyes,openEyes函数的应用，通过setTimeout设定函数循环，达到一个动画变换的效果。当然，像我这样的菜鸟还是看了好一会才弄明白，自己先收藏。关键还是思路。

标签:
相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）