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 ...
随机推荐
- 《Inside UE4》-0-开篇
<Inside UE4>-0-开篇 InsideUE4 前言 VR行业发展是越来越火热了,硬件设备上有HTC VIVE,Oculus rift,PS VR,各种魔镜:平台上有Steam ...
- Android Studio快捷键每日一练（3）
原文地址:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-3/ 23.启停用断点 苹果:Cmd+F8 Wi ...
- 【转】万网域名查询接口(API)的说明
1.域名查询接口采用HTTP,POST,GET协议:调用URL:http://panda.www.net.cn/cgi-bin/check.cgi参数名称:area_domain 值为标准域名,例:h ...
- 重构：用Command替换条件调度程序
注:该随笔受启发于 <重构与模式> 第七章 第7.6小节 用Command替换条件调度程序 . 对于Command不做过多解释,这里我找了两个例子.供部分园友参阅:Command例子1 ...
- Hichart 资料收集
Hichart简单使用Highcharts选项配置详细说明文档(zz) http://www.helloweba.com/view-blog-156.html by 澳米科技 Highcharts提 ...
- Web API接口设计经验总结
在Web API接口的开发过程中,我们可能会碰到各种各样的问题,我在前面两篇随笔<Web API应用架构在Winform混合框架中的应用(1)>.<Web API应用架构在Winfo ...
- 使用C#向Sql Sever中存取网络图片和本地图片（二进制流的形式）
先是做普通的,存储我们本地的图片,将它转化为二进制流存储到数据库对应的表中. 代码如下: string path = "../../A.jpg"; FileStream fs = ...
- sql中 in , not in , exists , not exists效率分析
in和exists执行时,in是先执行子查询中的查询,然后再执行主查询.而exists查询它是先执行主查询,即外层表的查询,然后再执行子查询. exists 和 in 在执行时效率单从执行时间来说差不 ...
- 【Java每日一题】20161101
package Nov2016; import java.util.HashMap; import java.util.Map; public class Ques1101 { public stat ...
- Firemonkey Bitmap 设定像素颜色 Pixel
VCL 和 Firemonkey 的 Bitmap 处理像素的方式不相同,下例为将图片内不是「白色」的像素全部改成「黑色」: procedure TForm1.Button1Click(Sender: ...