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 ...
随机推荐
- caffe-window搭建自己的小项目例子
手头有一个实际的视觉检测的项目,用的是caffe来分类,于是需要用caffe新建自己的项目的例子.在网上找了好久都没有找到合适的,于是自己开始弄. 1 首先是配置caffe的VC++目录中的inclu ...
- 数论 - 筛法暴力打表 --- hdu : 12876 Quite Good Numbers
Quite Good Numbers Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit ...
- Emit学习(2) - IL - 值类型和引用类型(补)
上周末回家去享受生活了, 工作是为了更好的生活嘛, 所以我把生活, 工作分的比较开. 这几天不是很忙, 在学习工作技能的同时, 发点博文, 也算是做一个学习笔记 上篇中, 贴出的地址里面那位哥, 也有 ...
- Windows Phone 8.1中处理后退键的HardwareButtons.BackPressed事件
在WP8中,处理后退键比较简单,重写OnBackKeyPress事件即可.如经常用的双击后退键退出的功能,用户在MainPage页面第一次点击后退键时,弹出一个对话框"是否退出?" ...
- 【UWP】使用Action代替Command
在Xaml中,说到绑定,我们用的最多的应该就是ICommand了,通过Command实现ViewModel到View之间的命令处理,例如Button默认就提供了Command支持,如下 Xaml: & ...
- 关于JQuery（最后一点动画效果*）
1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...
- xamarin.ios 实现圆形进度条
using System; using UIKit; using System.Drawing; using CoreAnimation; namespace PMM { public class P ...
- 一个十年java程序员的心得
展望未来,总结过去10年的程序员生涯,给程序员小弟弟小妹妹们的一些总结性忠告 走过的路,回忆起来是那么曲折,把自己的一些心得体会分享给程序员兄弟姐妹们,虽然时代在变化,但是很可能你也会走我已经做过的1 ...
- Gym 101102C---Bored Judge（区间最大值）
题目链接 http://codeforces.com/gym/101102/problem/C problem description Judge Bahosain was bored at ACM ...
- 对Java并发编程的几点思考
1. Threads 和 Runnables 所有的现代操作系统都通过进程和线程来支持并发.进程是通常彼此独立运行的程序的实例,比如,如果你启动了一个Java程序,操作系统产生一个新的进程,与其他程序 ...