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

随机推荐

Linux下通过源码编译安装程序
本文简单的记录了下,在linux下如何通过源码安装程序,以及相关的知识.(大神勿喷^_^) 一.程序的组成部分 Linux下程序大都是由以下几部分组成: 二进制文件:也就是可以运行的程序文件库文件: ...
php+mysql+apache项目运行所遇到的一系列配置问题
今天运行一个php项目时,突然发现访问不了了.起因应该是mac系统升级,导致apache配置文件完全恢复到了默认状态,一切归零.作为一个经验尚欠的前端,对这些后台配置完全是一窍不通,赶紧微信联系了小胖 ...
CaptureManagerSDK
Simple SDK for capturing, recording and streaming video and audio from web-cams on Windows OS by Win ...
在MVC中使用async和await的说明
首先,在mvc中如果要用纯异步请不要使用async和await,可以直接使用Task.Run. 其次,在mvc中使用async和await可以让系统开新线程处理Task的代码,同时不必等Task执行结 ...
关于ExtJs4的Grid带查询参数分页（baseParams-->extraParams）
(园里很多文章,美名其曰 :ExtJs GridPanel+查询条件+分页. 但是加查询条件后点击下一页,查询条件失效,求你们自己测试明白再显摆不要误导我这种新人.) ExtJs6发布了,ExtJ ...
【吐槽】IM群里几种我认为愚蠢的提问方式
一.“有人吗?” 你能得到一句[在,请说]的答复我就服了你,这样问的结果往往是等半天没一个人鸟你,悲观的你或者就此凄凉的退群了,感概人情冷暖的同时甚至开始怀疑人生:积极的你或者这才意识到~要不干脆说问 ...
iOS阶段学习第12天笔记（类的初始化）
iOS学习(OC语言)知识点整理一.类的初始化 1)init初始化方法(构造方法):一般和alloc一起调用,用于给成员变量初始化. 2)id类型:相当于C中的void*,可以指向任何对象,不能加* ...
jquery基本选择器匹配多个元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
MySQL知识总结
一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...
钉钉服务器端SDK PHP版
项目地址: https://github.com/web3d/DingtalkSDK.git 钉钉官方有些简单的demo,但封装得有些粗糙. 开发的过程中,做了一个有点小意思的工具:json数据转换为 ...

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

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

随机推荐

热门专题