IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

网站导航标题栏下面有一小色块跟随鼠标移动 同时色块颜色改变的特效

发布日期:2014-05-08 21:12:22
  • 收藏本文    我要投稿
  • 可能很多人看标题不是很明白这个特效,下面简述一下这个特效

    看到很多网站上的导航栏下面有一个小的色块,一开始小色块是处在第一个标题下面的,当鼠标移动到另一个标题时,这个小色块就会悠悠地跑到对应的标题下面。

    \

    \

    也可以鼠标放上去不光是色块移动,颜色也相应的改变:

    \

    这里截图只能看到色块是移动了,但显示不出色块是从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>

Tag标签:色块  网站导航  特效  
  • 专题推荐