首页 > 代码库 > 网站导航标题栏下面有一小色块跟随鼠标移动特效
网站导航标题栏下面有一小色块跟随鼠标移动特效
可能很多人看标题不是很明白这个特效,下面简述一下这个特效:
看到很多网站上的导航栏下面有一个小的色块,一开始小色块是处在第一个标题下面的,当鼠标移动到另一个标题时,这个小色块就会悠悠地跑到对应的标题下面。
这里截图只能看到色块是移动了,但显示不出色块是从Home下面平滑移动到Product下面的。反正就是这个意思了。大家看我上面的解释就知道了,不行看下面代码或者把代码拷贝运行一下就看到效果了
这个特效很好玩,正好朋友写了这方面的特效代码,我拿过来看了下,这才发现其实很简单,就是几个jquery封装好的方法拼接一下就ok了,但自己写还是很犯难,其实主要还是想法和思路的问题。
下面贴出代码:
注意:
1.用到了jquery库,大家如果有兴趣复制粘贴过去自己调试一下,请自行导入对应的jquery库即可
2.用了parent()函数
3.用了position()函数
4.用了stop()函数
(这个stop函数可以重载。可以是一个参数,表示无条件的停止当前的一切动画。一个是两个参数,表示是否让当前动画执行完成后再停止动画)
5.用了animate()函数
(这个animate很常用,建议大家去w3cshool上看一下)
6.鼠标放上去和移开的mouseenter和mouseleave函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js滑动导航</title> <style> body,html,div{margin:0;padding:0;font-weight:bold;font-family:Verdana, Geneva, sans-serif; font-style:italic;} .menu{ margin:0 auto; width: 900px; position: relative; background-color:#000; border:0px solid #000; } .menu ul{ border:0px solid #F00; height:60px; padding:0;} .menu li{ float: left; width:80px; list-style: none; padding: 0 20px; text-align: center; height: 60px; line-height: 60px;; border:0px solid #FFF;} .menu li a{text-decoration:none; color:#CCC;} .menu a:hover,.menu li:hover a{ color: #0CF; } .back{ height: 3px; background-color: #0CF; position: absolute; bottom: 0px; left: 0px; width: 120px; } </style> <script src=http://www.mamicode.com/"Js/jquery1.9.1.js" language="javascript" type="text/javascript"></script>>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。