IT技术互动交流平台

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

发布日期:2014-05-08 21:12:22

可能很多人看标题不是很明白这个特效,下面简述一下这个特效

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



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


这里截图只能看到色块是移动了,但显示不出色块是从Home下面平滑移动到Product下面的。反正就是这个意思了。大家看我上面的解释就知道了,不行看下面代码或者把代码拷贝运行一下就看到效果了

这个特效很好玩,正好朋友写了这方面的特效代码,我拿过来看了下,这才发现其实很简单,就是几个jquery封装好的方法拼接一下就ok了,但自己写还是很犯难,其实主穴ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq7ucrHz+u3qLrNy7zCt7XEzsrM4qGjPC9wPgoKPHA+z8LD5sz5s/a0+sLro7o8L3A+CjxwPtei0uKjujwvcD4KPHA+MS7Tw7W9wctqcXVlcnm/4qOstPO80sjnufvT0NDLyKS4tNbG1bPM+bn9yKXX1Ly6tffK1NK7z8KjrMfr19TQ0LW8yOu21NOmtcRqcXVlcnm/4ry0v8k8L3A+CjxwPjIu08PBy3BhcmVudCgpuq/K/TwvcD4KPHA+My7Tw8HLcG9zaXRpb24oKbqvyv08L3A+CjxwPjQu08PBy3N0b3AoKbqvyv08L3A+CjxwPijV4rj2c3RvcLqvyv2/ydLU1tjU2KGjv8nS1MrH0ru49rLOyv2jrLHtyr7O3sz1vP61xM2j1rm1scewtcTSu8fQtq+7raGj0ru49srHwb249rLOyv2jrLHtyr7Kx7fxyMO1scewtq+7rda00NDN6rPJuvPU2c2j1rm2r7utKTwvcD4KPHA+NS7Tw8HLYW5pbWF0ZSgpuq/K/TwvcD4KPHA+KNXiuPZhbmltYXRlutyzo9PDo6y9qNLptPO80sildzNjc2hvb2zJz7+00rvPwik8L3A+CjxwPjYuyvOx6rfFyc/IpbrN0sa/qrXEbW91c2VlbnRlcrrNbW91c2VsZWF2Zbqvyv08L3A+CjxwPjwvcD4KPHByZSBjbGFzcz0="brush:java;"><!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标签: 色块   网站导航   特效  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规