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 ...
随机推荐
- html/css基础篇——GET和POST的区别
本文前面部分转自木-叶的博文,后面有本人自己的一些总结和体会. 如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历 前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般 ...
- JVM之类加载器中篇
先看一段代码吧! package com.tfdd.test; /** * @desc * @author chenqm * @date 2016年2月15日 */ public class Fina ...
- tornado--SESSION框架，一致性hash，分布式存储
预备知识 tornado框架session要自己写 cookie存储在客户端浏览器上,session数据放在服务器上 session依赖cookie 扩展tornado,返回请求前自定义session ...
- HBase相关
hadoop和hbase节点添加和单独重启 有时候hadoop或hbase集群运行时间久了后,某些节点就会失效,这个时候如果不想重启整个集群(这种情况在很多情况下已经不被允许),这个时候可以单独重启失 ...
- 模拟 --- hdu 12878 : Fun With Fractions
Fun With Fractions Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit ...
- win10 服务（系统默认服务）注册表
---恢复内容开始--- Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services] ...
- 在CentOS上部署Asp.Net MVC3的第一次尝试
关注mono已经很久了,现在才有时间真正的尝试一下在linux中部署asp.net的网站,也算是记录 一下自己的第一次尝试吧. 我的实践的环境是win7 + VM10 + CentOS6.5 下面就是 ...
- 添加html元素
html: <div id='divContainer'> </div> 1.使用DOM对象添加元素 var el = document.createElement('div' ...
- [转]HTML5 本地图片预览
[原文链接] https://www.huangwenchao.com.cn/2015/03/html5-image-preview.html 问题 加入我们在 HTML 里面有一个图片上传控件: & ...
- asp.net中Ajax控件的用途（一）
1,UpdatePanel控件,用户更新部分内容,示例 放入一个Label和一个Button,单击按钮,label显示当前时间. 2,ScriptManagerProxy控件,每个页面只能有一个Scr ...