网站导航标题栏下面有一小色块跟随鼠标移动,同时色块颜色改变的特效
2014-05-08 13:06
701 查看
可能很多人看标题不是很明白这个特效,下面简述一下这个特效:
看到很多网站上的导航栏下面有一个小的色块,一开始小色块是处在第一个标题下面的,当鼠标移动到另一个标题时,这个小色块就会悠悠地跑到对应的标题下面。
也可以鼠标放上去不光是色块移动,颜色也相应的改变:
这里截图只能看到色块是移动了,但显示不出色块是从Home下面平滑移动到Product下面的。反正就是这个意思了。大家看我上面的解释就知道了,不行看下面代码或者把代码拷贝运行一下就看到效果了
这个特效很好玩,正好朋友写了这方面的特效代码,我拿过来看了下,这才发现其实很简单,就是几个jquery封装好的方法拼接一下就ok了,但自己写还是很犯难,其实主要还是想法和思路的问题。
下面贴出代码:
注意:
1.用到了jquery库,大家如果有兴趣复制粘贴过去自己调试一下,请自行导入对应的jquery库即可
2.用了parent()函数
3.用了position()函数
4.用了stop()函数
(这个stop函数可以重载。可以是一个参数,表示无条件的停止当前的一切动画。一个是两个参数,表示是否让当前动画执行完成后再停止动画)
5.用了animate()函数
(这个animate很常用,建议大家去w3cshool上看一下)
6.鼠标放上去和移开的mouseenter和mouseleave函数
如果需要鼠标放上去色块的颜色也改变,则只要把<script>里面的内容改成如下即可:
看到很多网站上的导航栏下面有一个小的色块,一开始小色块是处在第一个标题下面的,当鼠标移动到另一个标题时,这个小色块就会悠悠地跑到对应的标题下面。
也可以鼠标放上去不光是色块移动,颜色也相应的改变:
这里截图只能看到色块是移动了,但显示不出色块是从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="Js/jquery1.9.1.js" language="javascript" type="text/javascript"></script> <script> $(document).ready(function(e) { $(".menu ul li a").mouseenter(function(){ var parent=$(this).parent(); left=parent.position().left; $(".back").stop(true,true).animate({left:left,width:"120px"}, "fast"); }) $(".menu ul").mouseleave(function(){ $(".back").stop(true,true).animate({left:"0px",width:"120px"},"fast"); }) }); </script> </head> <body> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Picture</a></li> <li><a href="#">Product</a></li> <li><a href="#">Contact</a></li> </ul> <div class="back"></div> </div> </body> </html>
如果需要鼠标放上去色块的颜色也改变,则只要把<script>里面的内容改成如下即可:
<script> $(document).ready(function(e) { $(".menu ul li a").mouseenter(function(){ var parent=$(this).parent(); left=parent.position().left; $(".back").stop(true,true).animate({left:left,width:"120px"}, "fast"); $(".back").css("background-color","#F00");//鼠标放上去色块颜色改变 }) $(".menu ul").mouseleave(function(){ $(".back").stop(true,true).animate({left:"0px",width:"120px"},"fast"); $(".back").css("background-color","#0CF");//鼠标移开色块颜色恢复初始值 }) }); </script>
相关文章推荐
- 网站导航标题栏下面是几个补丁尾随鼠标移动,当同样的颜色变化效果的颜色
- CSS:当鼠标移动到表格的某一行时改变其背景颜色
- css如何做到 鼠标移动到超链接时,超链接会发生改变,例如改变颜色、字体大小、背景颜色等
- 鼠标移动 改变Datagrid行的背景颜色
- unity3d实现一个人物跟随鼠标点击地面那点就移动那点,实现点击特效加人物动画方向的切换。
- JQuery的hover()方法使鼠标指针移过导航,改变背景颜色
- 如何实现table背景色随鼠标移动改变颜色?
- C#鼠标移动到Button上后改变边框颜色
- 当鼠标移动到Picture控件时,如何改变static控件的字体的颜色
- 当鼠标移动到表单上,改变表单的颜色
- 鼠标移动,改变DataGrid颜色
- 下拉列表,鼠标移动上去改变颜色
- 鼠标移动,改变DataGrid颜色
- javascript:鼠标移动改变编辑器高度的特效
- 当鼠标移动到表格的一行时这一行的背景颜色发生改变
- 【ActionScript】利用复制影片duplicateMovieClip与鼠标拖动跟随startDrag做出鼠标移动特效
- DataGrid中鼠标点击、移动后行颜色改变效果
- WPF 设置DataGrid 鼠标移动改变行颜色样式
- 当鼠标移动时,改变datagrid中的颜色
- 移动窗体上的控件,鼠标跟随,动态改变