Jquery导航悬停点击及首页图片切换功能
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="wzgyd.WebForm3" %>
<!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 runat="server">
<title>无标题页</title>
<style type="text/css">
.divlest
{
width: 146px;
height: 50px;
float: left;
border-color: Black;
border-left-style: solid;
border-width: 1px;
text-align: center;
line-height: 50px;
font-weight: bold;
color: White;
}
.fj
{
text-align: center;
width: 39px;
float:right;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
height: 116px;
}
a
{
text-decoration: none;
color: White;
}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var number=0;
//>同于子级（children）
$(".fj>input").click(function(){
//获得input标签的索引值赋值给number变量
number=$(this).index();
//switch判断是否符合条件，执行背景DIV样式的切换
switch(number){
case 0:
$("#upcolor").css("background-color","White");
break;
case 1:
$("#upcolor").css("background-color","red");
break;
case 2:
$("#upcolor").css("background-color","Black");
break;
case 3:
$("#upcolor").css("background-color","blue");
break;
case 4:
$("#upcolor").css("background-color","lime");
break;
case 5:
$("#upcolor").css("background-color","aqua");
break;
}
});
var x_inx=0;
$(".divlest").click(function(){
x_inx=$(this).index();//获得当前点击的值
$(".divlest").css("background-color","#8f5e23");//给所有Div按钮变换为初始样式
$(this).css("background-color","#724a1a");//给当前点击DIV按钮变换样式
});
//mouseover鼠标悬停事件
//mouseout鼠标移出事件
$(".divlest").mouseover(function(){
$(this).css("background-color","#724a1a");
}).mouseout(function(){
var x=$(this).index();
//判断鼠标移出div的值是否和鼠标单击的值不一致
if(x!=x_inx)
{
//不一致更改背景颜色
$(this).css("background-color","#8f5e23");
}
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 769px; width:100%; text-align:center;">
<div style=" width:100%; height:50px; text-align:center; margin:0 auto;">
<div class="divlest" style="margin-left:100px;"><a href="#">首页</a></div>
<div class="divlest" ><a href="#">品牌</a></div>
<div class="divlest"><a href="#">腕表</a></div>
<div class="divlest"><a href="#">箱包</a></div>
<div class="divlest"><a href="#">我要寄卖</a></div>
<div class="divlest"><a href="#">名品养护</a></div>
<div class="divlest" style=" border-right-style:solid;"><a href="#">金融兑现</a></div>
</div>
<div style="height: 451px; text-align:center; margin-top:10px; margin-left: auto; margin-right: auto; margin-bottom: 0;">
<div id="upcolor" style="height: 392px; ">
<div class="fj">
<input type="radio" name="an" id="1" checked="checked" value="1" />
<input type="radio" name="an" id="2" value="2" />
<input type="radio" name="an" id="3" value="3" />
<input type="radio" name="an" id="4" value="4" />
<input type="radio" name="an" id="5" value="5" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Jquery导航悬停点击及首页图片切换功能的更多相关文章
- jquery 实现的一款超简单的图片切换功能
<html><head> <meta http-equiv="Content-Type" content="text/html; chars ...
- 【分享】jQuery无插件实现 鼠标拖动图片切换 功能
前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...
- jquery实现鼠标移入移除背景图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- 30款jQuery常用网页焦点图banner图片切换 下载
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- 30款jQuery常用网页焦点图banner图片切换 下载 （转）
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- 30款jQuery常用网页焦点图banner图片切换
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- JQuery弹出层，实现弹层切换，可显示可隐藏。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
随机推荐
- Office PPT保持提示无法保存Gill Sans 等非TrueType字体
升级office到最新版了 我有一天在做PPT,保存文件后提示保存:无法保存Gill Sans 等非TrueType字体 我知道PPT可以替换字体.于是使用替换字体功能,但是提示非TrueType不能 ...
- Azure China (7) 使用WebMetrix将Web Site发布至Azure China
<Windows Azure Platform 系列文章目录> 本章介绍的是,使用世纪互联运维的Azure云服务. 1.首先我们登陆Azure管理界面.http://manage.wind ...
- Windows Azure Active Directory (4) China Azure AD Self Password Reset
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. 在开始本章内容之前,请读者熟悉笔者之前写的文档: Windows ...
- ansible入门
前言 最近看了一下ansible,挺火的一个配置管理工具,对比老大哥puppet,使用起来要简单一些,并且可以批量执行命令,对比同是python语言编写的saltstack,不需要安装客户端(基于pa ...
- 用SQL语句查找包含有某个关键字的存储过程、触发器、函数等(仅适用MS SQL SERVER)
第一种方法:利用系统表进行查询 --将text替换成你要查找的内容 select name from sysobjects o, syscomments s where o.id = s.i ...
- 利用getBoundingClientRect方法实现简洁的sticky组件
补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...
- Dapper学习 - Dapper的基本用法(三) - CUD
之前介绍了Dapper的查询, 存储过程, 函数的调用, 接下来要说一下Dapper的增删改, 其实Dapper的增删改, 都是同一种模式的. 我就不分开介绍了, 直接在一个例子上展现好了. var ...
- No assembly found containing an OwinStartupAttribute
自从在ASP.NET MVC中使用NuGet添加SignalR类库之后,再次运行程序时,它出现了一个异常: Server Error in '/' Application. The following ...
- 在Winform界面中实现对多文档窗体的参数传值
在Winform界面中窗体我们一般使用多文档进行展示,也就是类似一般的选项卡的方式可以加载多个窗体界面.一般来说,我们如果打开新的窗体,给窗体传递参数是很容易的事情,但是在框架层面,一般的窗体是通过动 ...
- 循序渐进开发WinForm项目（6)--开发使用混合式Winform模块
1.Winform数据访问模式定义 传统的Winform程序模块:用于传统的数据库通讯获取数据,这种方式获取数据,方便快捷,可以用于常规的业务系统的场景,用于单机版软件或者基于局域网内的业务系统软件. ...