jquery 导航条的效果(css选择器控制)

标题1

标题2

标题3

标题4

标题5

标题6

进入之后才能看到效果!

$(document).ready(function () {
myHide();
});
function myHide() {
//alert("hello");
//注册事件
$(".m1").bind('mouseover', m1_mouseover);
$(".m1").bind('mouseout', m1_mouseout);
$(".m2").bind('mouseover', m2_mouseover);
$(".m2").bind('mouseout', m2_mouseout);
$(".m3").bind('mouseover', m3_mouseover);
$(".m3").bind('mouseout', m3_mouseout);
$(".m4").bind('mouseover', m4_mouseover);
$(".m4").bind('mouseout', m4_mouseout);
$(".m5").bind('mouseover', m5_mouseover);
$(".m5").bind('mouseout', m5_mouseout);
$(".m6").bind('mouseover', m6_mouseover);
$(".m6").bind('mouseout', m6_mouseout);
};
function m1_mouseover() {
$(".m1").animate({ width: "100px", height: "30px",fontSize:"22px" }, "fast");
}
function m1_mouseout() {
$(".m1").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m2_mouseover() {
$(".m2").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m2_mouseout() {
$(".m2").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m3_mouseover() {
$(".m3").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m3_mouseout() {
$(".m3").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m4_mouseover() {
$(".m4").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m4_mouseout() {
$(".m4").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m5_mouseover() {
$(".m5").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m5_mouseout() {
$(".m5").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m6_mouseover() {
$(".m6").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m6_mouseout() {
$(".m6").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}

.m1,.m2,.m3,.m4,.m5,.m6
{
width:70px;
height:20px;
background-color:#cccccc;
border: thin solid #9999ff;
font-size:14px;
}
.all
{
width:80px;
height:160px;
text-align:center;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • jQuery实现智能判断固定导航条或侧边栏的方法

    本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法.分享给大家供大家参考,具体如下: 这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏.侧边栏.任何DIV层的固定显示:现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了:使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script s

  • 基于jquery的一个OutlookBar类,动态创建导航条

    图示效果:演示地址:http://demo.jb51.net/js/menu_jquery/index.html下载地址:http://xiazai.jb51.net/201011/yuanma/menu_jquery.rarOutlookBar.js 复制代码 代码如下: function OutlookBar(targetName)//targetName:右侧iframe的name { //创建标题 this.AddTitle=function(menuid,menutitle,openo

  • jQuery固定浮动侧边栏实现思路及代码

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • jQuery侧边栏实现代码

    先给大家展示下实现效果图,如果亲感觉是您想要的效果,请参考本代码. 实现代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript菜单侧边展开(改良版)</title> </head> <body> <ul id="navigation"> <li>&

  • jquery scrollTop方法根据滚动像素显示隐藏顶部导航条

    本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选.规定相对滚动条顶部的偏移,以像素计. 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offse

  • jquery实现的蓝色二级导航条效果代码

    本文实例讲述了jquery实现的蓝色二级导航条效果代码.分享给大家供大家参考.具体如下: 这是一款网站导航条效果代码,菜单最多可支持两级,适合较多类型的网站使用,不喜欢蓝色的可自己修改成其它颜色,整体效果不错,挺简单的网站导航. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-2level-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • jQuery关于导航条背景切换效果实现示例

    效果如下:   复制代码 代码如下: <DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <meta charset="UTF-8"> <style> .nav{height:40px; width: 100%;background: #E6E6

  • Jquery实现侧边栏跟随滚动条固定(兼容IE6)

    部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop

  • jquery简单实现鼠标经过导航条改变背景图

    复制代码 代码如下: <!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=&qu

随机推荐