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 ...
随机推荐
- oracle分页
sqlStmt = sqlCon.createStatement(); strSQL sql="select * from (select rownum rno,content from ( ...
- GitHub一代：我们都是开源控
我们是新的GitHub一代?GitHub塑造了新式开源文化?嗯,看看十几年开源控.Getable CTO Mikeal Rogers 是怎么说的吧: GitHub本来想做一个开源软件协作平台,结果做着 ...
- 【Swift学习】Swift编程之旅---控制流（九）
Swift提供了类似C语言的流程控制结构,包括可以多次执行任务的for和while循环,基于特定条件选择执行不同代码分支的if和switch语句,还有控制流程跳转到其他代码的break和continu ...
- c#设计模式之简单工厂
1.面向对象的3大属性,封装.继承.多态,以一个加单的计算机为例: 创建一个父类Operation 有两个属性 和一个计算方法(虚方法),便于子类重写: public class Operation ...
- Ajax长轮询
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Wait.asp ...
- 基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动
为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文 ...
- js 模块化历程
作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生 ...
- 前端代码标准最佳实践：CSS
前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...
- C#的变迁史 - C# 3.0篇
C# 3.0 (.NET 3.5, VS2008) 第三代C#在语法元素基本完备的基础上提供了全新的开发工具和集合数据查询方式,极大的方便了开发. 1. WPF,WCF,WF 这3个工程类型奠定了新一 ...
- 部署Eclipse中的Web项目到Tomcat服务器运行
用Eclipse开发Web项目时,可以通过Tomcat服务器运行Web项目,此时Web项目被部署在[WorkSpace]\.metadata\.plugins\org.eclipse.wst.serv ...