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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 悬停切换

jQuery案例(底部导航图片切换)

jquery 广告轮播图

jquery点击图标来回切换的几种方法(如开关

12个用得着的 JQuery 代码片段

使用 jQuery 单击切换