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="Content-Type" content="text/html; charset=utf-8" />
<title>维护中...</title>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
background:yellow;
}
#container{
width:962px;
height:auto;
background:url(b3.jpg);
margin:0px auto;
}
#head{
height:100px;
width:100%;
}
.head_ul{
list-style:none;
margin-left:200px;
}
.head_ul li{
float:left;
width:90px;
height:50px;
line-height:40px;
font-size:20px;
margin-top:40px;
background:url(b1.png);
}
.head_ul li a{
text-decoration:none;
}

#main{
width:100%;
height:1500px;
}
#left{
width:30%;
height:100%;
float:left;
}
#right{
width:70%;
height:100%;
float:left;
}
#clear{
clear:both;
}
#foot{
height:100px;
width:100%;
}

</style>
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
$(".head_ul li").hover(function(){
$(this).css('background','url(b2.png)');
},function(){
$(this).css('background','url(b1.png)');
}
);
});

</script>
</head>
<body>
<div id="container">
<div id="head">
<ul class="head_ul">
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>

<div id="main">
<div id="left"></div>
<div id="right"></div>
<div id="clear"></div>
</div>

<div id="foot"></div>
</div
</body>
</html>

时间: 2013-12-16

jquery入门—编写一个导航条(可伸缩)

1.编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容. 示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="

jQuery 借助插件Lavalamp实现导航条动态美化效果

借助 插件 Lavalamp实现导航条动态显示效果, 以前用animate来实现,效果不是很好 复制代码 代码如下: <script src="js/jquery-2.0.0.min.js" type="text/javascript"></script> <script src="js/jquery.easing.min.js" type="text/javascript"></sc

Jquery.TreeView结合ASP.Net和数据库生成菜单导航条

下面的例子将结合项目实际运用来使用Jquery.TreeView,当然在使用控件树需要现在相应的js文件 下面就把我生成的TreeView展现给大家看看希望对大家有所帮助!在使用之前需要下载控件树的js文件和Css样式 介绍一下表结构 M_ID M_Name M_ParentID M_URL M_Sort 然后新建一个网站,在新建的网站下添加CSS文件夹和js文件夹分别用于存放Css样式和JS,同时再添加一个image文件夹用于存放TreeView的图片 接着我们就开始实现我们的功能了! 前台代

jQuery+CSS3实现四种应用广泛的导航条制作实例详解

导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果. 接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条. 1.高亮显示的导航

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

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

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实现一些导航条切换,显示隐藏的实例代码

代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>导航条在项目中的应用</title>    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2

CSS3+Js实现响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

BootStrap创建响应式导航条实例代码

首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www

bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)

本文实例为大家分享了bootstrap响应式导航条模板展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&quo

BootStrap响应式导航条实例介绍

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.响应式导航条就是可以在不同的设备下查看不同的效果. 下面给大家分享代码: <header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div c

CSS3 media queries结合jQuery实现响应式导航

目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个. 所以我选择了将导航绝对定位. 2.默认导航列表是出现的,当屏幕宽度小于700px时它隐藏,并且设置position,当屏幕宽度大于700px时,它出现.或者,默认导航列表是隐藏的,当屏幕宽度大于700px时它出现在右侧,小于时隐

Bootstrap Navbar Component实现响应式导航

目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一个规定的类名时是做了些什么 根据自己的需求进行改装 对比自己的实现方法,找出差距. 1.实现: 我想要模仿一个这样的响应式导航: 按照Bootstrap官网上介绍的方法,按照规则创建标签添加类名之后,可以得到一个这样的导航: 代码: <nav class="navbar navbar-defa

Bootstrap响应式导航由768px变成992px的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!--响应式导航部分--> <header role="banner"> <nav role="navigation" class="navbar navbar-static-top navbar-default"> <div class="container "> <div class="navbar-he

Bootstrap每天必学之响应式导航、轮播图

本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分. 基本导航组件+响应式: //基本导航组件+响应式 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class=

Vue的事件响应式进度条组件实例详解

写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图 以

Bootstrap实现响应式导航栏效果

为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换