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>

$(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 ...

随机推荐

用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
java并发编程(2)--volatile（转）
转载:http://ifeve.com/volatile/ 作者:方腾飞花名清英,并发网(ifeve.com)创始人,畅销书<Java并发编程的艺术>作者,蚂蚁金服技术专家.目前工作于 ...
golang中的race检测
golang中的race检测由于golang中的go是非常方便的,加上函数又非常容易隐藏go. 所以很多时候,当我们写出一个程序的时候,我们并不知道这个程序在并发情况下会不会出现什么问题. 所以在本 ...
DirectoryHelper
/// <summary> /// 将相对路径转换成程序所在的绝对路径 /// </summary> /// <param name="path"&g ...
30天C#基础巩固------了解委托，string练习
---->了解委托. 生活中的例子:我要打官司,我需要找一个律师,法庭上面律师为当事人辩护,它真正执行的是当事人的陈词,这时律师就相当于一个委托对象.当事人则委托律师为自己辩解. ...
原生JS查找元素
今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...
UEditor 1.4.3.1.NET版本上传配置备忘录
UEditor用起来还是挺方便的,下面是记录一下在上传中的配置问题(主要是上传图片的配置,其他的都是类似的). 我下载的是UEditor 1.4.3.1 .NET版本. 官网的配置说明地址为 http ...
怎么解析json串在.net中
以前知道一种解析json串的方法,觉得有点麻烦.就从别的地方搜到了另一种 string json = vlt.getlist(); JObject jo = JObject.Parse(json); ...
Web API应用架构在Winform混合框架中的应用（4）--利用代码生成工具快速开发整套应用
前面几篇介绍了Web API的基础信息,以及如何基于混合框架的方式在WInform界面里面整合了Web API的接入方式,虽然我们看似调用过程比较复杂,但是基于整个框架的支持和考虑,我们提供了代码生成 ...
【C#】1.3 WPF应用程序学习要点
分类:C#.VS2015 创建日期:2016-06-14 使用教材:十二五国家级规划教材<C#程序设计及应用教程>(第3版) 一.要点概述 <C#程序设计及应用教程>(第3版) ...

Jquery导航悬停点击及首页图片切换功能

Jquery导航悬停点击及首页图片切换功能的更多相关文章

随机推荐

热门专题