<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>案例-品牌选择</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

    <style type="text/css">

    	body{

    		font-family: "Microsoft YaHei";

    		text-align: center;

    	}

    	#mainDiv {

    		width: 100%;

    		text-align: center;

    		margin-top:10px;

    	}

    	.divRow {

    		text-align: center;

    		margin-left: auto;

    		margin-right: auto;

    		width:736px;

    	}

    	.divColumn {

    		width:104px;

    		height:38px;

    		color: #005aa0;

    		border: solid 1px #b9b9b9;

    		font-size:14px;

    		float:left;

    		margin: 0 -1 -1 0;

    		text-align: center;

    		cursor: pointer;

    	}

    	.divColumn a {

    		height: 36px;

    		line-height: 36px;

    		overflow: hidden;

    		padding: 0;

    		position: relative;

    		white-space: nowrap;

    		width: 102px;

    		display: inline-block;

    	}

    	.divColumn img {

    		display: block;

    		height: 36px;

    		position: absolute;

    		width:102px;

    		z-index:1;

    		left:0;

    		top:0;

    	}

    	.hover {

			color: #e4393c;

    		border: solid 1px #e4393c;

    		position: relative;

    	}

    	.more,.fold {

    		font-size: 12px;

    		color: #005aa0;

    		cursor: pointer;

    	}

    	.more b{

    		background: rgba(0,0,0,0) url("images/down.gif") no-repeat;

    		height: 5px;

    		overflow: hidden;

    		position: absolute;

    		width: 7px;

    		margin:6 0 0 3;

    	}

    	.fold b{

    		background: url("images/up.gif");

    	}

    	.cGreen{background-color: #4CA902}

    	.cPink{background-color: #ED4A9F}

    	.cBlue{background-color: #0092E7}

    	.cCyan{background-color: #01A6A2}

    	.cYellow{background-color: #DCA112}

    	.cRed{background-color: #B7103B}

    	.cPurple{background-color: #792F7C}

    	.cBlack{background-color: #110F10}

    	.cOrange{background-color: #FF4500}

    	.cGray{background-color: #A9A9A9}

    	.hide{display: none;}

    </style>

    <script type="text/javascript">

    	$(document).ready(function(){

			//1、进入页面时第二行的品牌不可见

			$(".divColumn:gt(6)").hide();

			//2、更多的点击事件

			$(".more").on("click", function(){

				var $moreDiv = $(this);

				if($moreDiv.hasClass("fold")){

					//2.2、当显示的是 收起 的时候

					//2.2.1、将 收起 改成 更多

					$moreDiv.find("span").html("更多<b></b>");

					//2.2.2、将向上的箭头改成向下的箭头

					$moreDiv.removeClass("fold");

					//2.2.3、隐藏第二行数据

					$(".divColumn:gt(6)").hide();

				} else {

					//2.1、当显示的是 更多 的时候

					//2.1.1、将 更多 改成 收起

					$moreDiv.find("span").html("收起<b></b>");

					//2.1.2、将向下的箭头改成向上的箭头

					$moreDiv.addClass("fold");

					//2.1.3、显示第二行数据

					$(".divColumn:gt(6)").show();

				}

			});

			//3、当鼠标在品牌上和离开品牌的时候样式的变化

			$(".divColumn").hover(function(){

				//3.1、鼠标在品牌上

				//3.1.1、隐藏品牌图片

				$(this).find("img").hide();

				//3.1.2、改变品牌样式（字体和边框）

				$(this).addClass("hover");

			}, function(){

				//3.2、鼠标离开品牌的时候

				//3.2.1、显示品牌图片

				$(this).find("img").show();

				//3.2.2、改变品牌样式（字体和边框）

				$(this).removeClass("hover");

			});

    	});

    </script>

  </head>

  <body>

    <div id="mainDiv">

    	<div class="divRow">

    		<div class="divColumn">

    			<a><img alt="华为" src="data:images/huawei.jpg">华为</a>

    		</div>

    		<div class="divColumn">

    			<a><img alt="小米" src="data:images/xiaomi.jpg">小米</a>

    		</div>

    		<div class="divColumn">

    			<a><img alt="三星" src="data:images/samsung.jpg">三星</a>

    		</div>

    		<div class="divColumn">

    			<a><img alt="苹果" src="data:images/apple.jpg">苹果</a>

    		</div>

    		<div class="divColumn">

    			<a><img alt="魅族" src="data:images/meizu.jpg">魅族</a>

    		</div>

    		<div class="divColumn">

    			<a><img alt="诺基亚" src="data:images/nokia.png">诺基亚</a>

    		</div>

    		<div class="divColumn">

    			<a><img alt="vivo" src="data:images/vivo.png">vivo</a>

    		</div>

    		<div class="divColumn">

    			<a>OPPO</a>

    		</div>

    		<div class="divColumn">

    			<a>BlackBerry</a>

    		</div>

    		<div class="divColumn">

    			<a>努比亚</a>

    		</div>

    		<div class="divColumn">

    			<a>联想</a>

    		</div>

    		<div class="divColumn">

    			<a>索尼</a>

    		</div>

    		<div class="divColumn">

    			<a>酷派</a>

    		</div>

    		<div class="divColumn">

    			<a>HTC</a>

    		</div>

    	</div>

    	<div class="more"><span>更多<b></b></span></div>

   	</div>

  </body>

</html>

其中需要的图片请大家自行寻找！

jQuery最后案例：商标展示的更多相关文章

  1. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  3. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  4. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  5. Jquery 分页案例

    Jquery    分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  6. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  7. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  8. jquery选择器案例

    一.预期效果 实现一个效果,如下. 品牌列表默认精简显示,单击“显示全部品牌”按钮显示全部品牌,同时列表将推荐的品牌的名字高亮显示,按钮里的文字变成“精简显示品牌”.再次点击“精简显示品牌”回到初始页 ...

  9. jQuery 简单案例

    案例一:全选.反选.取消实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. Spark—RDD编程常用转换算子代码实例

    Spark-RDD编程常用转换算子代码实例 Spark rdd 常用 Transformation 实例: 1.def map[U: ClassTag](f: T => U): RDD[U]  ...

  2. 微信小程序云开发-列表数据分页加载显示

    一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...

  3. R语言客户端RStudio快捷键大全

    Console Description Windows & Linux Mac 将光标定位到控制台 Ctrl+2 Ctrl+2 清空控制台 Ctrl+L Command+L 将光标定位到行首 ...

  4. 网络损伤仪WANsim中的乱序功能

    乱序 乱序功能需要指定每个帧 发生乱序的概率,以及新的帧的位置相较于原来位置的时间范围. 乱序的概率范围是0%~20%,颗粒度是0.001%.Delay的设置范围为 0s~10s,颗粒度为0.1 ms ...

  5. POJ3667 Hotel 题解

    和最大子段和的思路是一样的,可以记 \(lmax,rmax,dat\) 分别表示从当前区间最靠左/右的最大连续空子段和当前区间的最大连续空子段. 需要用延迟标记,每次遇到开房操作先ask,如果能找到就 ...

  6. RegOpenKeyEx

    对注册表的操作是通过句柄来完成的,在对某个键下的键值进行操作的时候首先将该键进行打开,然后使用键句柄进行引用该键,操作完后要进行关闭: 注册键的根键不需要打开,他们的句柄是固定的,直接拿来用就是了. ...

  7. 面试问题记录 二 (数据库、Linux、Redis)

    面试问题记录 二 (数据库.Linux.Redis) 前言 接着上次的面试问题记录,在最后还有几道问的数据结构方面的知识点要补充 还是那句话:如果文中解释有明显错误,劳烦请及时指正我,在这不胜感激!! ...

  8. (python函数02)列表生成式

    (python函数02)列表生成式 示例代码  num = [i for i in range(1, 10)] print(num) ​ num = [i for i in range(1, 10) ...

  9. JUC学习笔记（一）

    1.什么是 JUC 1.1.JUC简介 在 Java 中,线程部分是一个重点,本篇文章说的 JUC 也是关于线程的.JUC 就是 java.util .concurrent 工具包的简称.这是一个处理 ...

  10. Rancher v1.6.29 Docker单节点部署

    前言: Docker镜像中心,有两个版本的rancher(1.X),镜像名称为:rancher/server,而rancher(2.X)的镜像名称是rancher/rancher 去daocloud官 ...