信鸽网

jQuery实现响应鼠标滚动的动感菜单效果

  作者：bea

本文实例讲述了jQuery实现响应鼠标滚动的动感菜单效果。分享给大家供大家参考。具体如下： 这是响应鼠标滚动的一款jQuery动感菜单，横向竖向这个大家怎么改吧，使用了jquery插件，不要忘记载入哦。看效果的时候如果加载有错误，请刷新一下页面就行了。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/jquery-mouse-over-dg-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBL

本文实例讲述了jQuery实现响应鼠标滚动的动感菜单效果。分享给大家供大家参考。具体如下：


这是响应鼠标滚动的一款jQuery动感菜单，横向竖向这个大家怎么改吧，使用了jquery插件，不要忘记载入哦。看效果的时候如果加载有错误，请刷新一下页面就行了。


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/jquery-mouse-over-dg-menu-style-codes/


具体代码如下：




<!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>

<title>响应鼠标滚动的jQuery动感菜单</title>

<style>

ul#topnav {

  margin: 15px 0 50px 0;

  padding: 0;

  list-style: none;

  float: left;

  font-size: 1.1em;

}

ul#topnav li {

  margin: 0;

  padding: 0;

  overflow: hidden;

  float: left;

  height: 40px;

}

ul#topnav li.home {

  width: 75px;

}

ul#topnav li.Rss {

  width: 75px;

}

ul#topnav li.Portfolio {

  width: 105px;

}

ul#topnav li.Blog {

  width: 75px;

}

ul#topnav li.About {

  width: 80px;

}

ul#topnav li.Contact {

  width: 95px;

}

ul#topnav a, ul#topnav span {

  padding: 10px 20px;

  float: left;

  text-decoration: none;

  color: #fff;

  background: url(images/a_bg.gif) repeat-x;

  text-transform: uppercase;

  clear: both;

  width: 100%;

  height: 20px;

  line-height: 20px;

}

ul#topnav a{

  color: #555;

  background-position: left bottom;

}

ul#topnav span { 

  background-position: left top;

}

ul#topnav.v2 span {

  background: transparent url(images/a_bg.gif) repeat-x left top;

}

ul#topnav.v2 a {

  background: transparent url(images/a_bg.gif) repeat-x left bottom;

  color: #555;

}

</style>

<script type="text/javascript" src="jquery1.3.2.js"></script>

</head>

<script>

$(document).ready(function() {

$("#topnav li").prepend("<span></span>");

$("#topnav li").each(function() {

var linkText = $(this).find("a").html();

$(this).find("span").show().html(linkText);}); 

$("#topnav li").hover(function() {

$(this).find("span").stop().animate({

marginTop: "-40"

}, 250);

} , function() {

$(this).find("span").stop().animate({

marginTop: "0"

}, 250);

});

});

</script>

<body>

<ul id="topnav">

 <li><a href="#">Home</a></li>

 <li><a href="#">Portfolio</a></li>

 <li><a href="#">Blog</a></li>

 <li><a href="#">About</a></li>

 <li><a href="#">Contact</a></li>

 <li><a href="#">Rss</a></li>

</ul>

</body>

</html>


希望本文所述对大家的jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: