<!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. CF1329F题解

    能发现: 1.输出序列与掉落顺序没有任何关系(因为单调性不会被改变). 2.输出的序列 \(h_i\) 最多有一组 \(h_i=h_{i+1}\). 对 2 的证明: 当 \(h_{i+1}\) 与 ...

  2. 论文阅读：hector_slam: A Flexible and Scalable SLAM System with Full 3D Motion Estimation.

    参考:<A Flexible and Scalable SLAM System with Full 3D Motion Estimation.> 该论文是ROS中hector_mappin ...

  3. 如何快速更新长缓存的 HTTP 资源

    前言 HTTP 缓存时间一直让开发者头疼.时间太短,性能不够好:时间太长,更新不及时.当遇到严重问题需紧急修复时,尽管后端文件可快速替换,但前端文件仍从本地缓存加载,导致更新长时间无法生效. 对于这个 ...

  4. 备战- Java虚拟机

    备战- Java虚拟机 试问岭南应不好,却道,此心安处是吾乡. 简介:备战- Java虚拟机 一.运行时数据区域 程序计算器.Java 虚拟机栈.本地方法栈.堆.方法区 在Java 运行环境参考链接: ...

  5. HDFS学习总结之架构

    一.hdfs介绍 官网说明 Hadoop Distributed File System (HDFS): A distributed file system that provides high-th ...

  6. dos命令的学习

    打开CMD的方式 开始+系统+命令提示符 Windows+R+输入CMD 在任意的文件夹下面,按住shift+点击鼠标右键,在此处打开命令行窗口 资源管理器的地址栏前面加上CMD路径 管理员方式运行: ...

  7. WLS中Linux与Windows间的环境共享

    Reference 更多cmd.exe帮助参考 (cmd_helps)[https://ss64.com/nt/cmd.html] (WSL备份,windows Docker安装)[https://w ...

  8. 关于Vmware-Tools的安装问题：Please re-run this program as the super user. Execution aborted.

    点击VM-Install VMware Tools在桌面上出现一张光盘包含3个文件,分别为manifest.txt:Vmware-tools-版本号.rpm和Vmware-tools-版本号.tar. ...

  9. 【知识详解】Https详解

    Https详解 1.什么是Https Http + SSL = Https 一句话说:Https是身披SSL的Http,当使用了SSL后,Http先和SSL通信,再由SSL和TCP通信, 2.为什么需 ...

  10. 5G[generation]的知识收集

    一.什么是5G? G的英文是"5 Generation",即第五代无线通讯系统. 二.发展历程 1G的速率只有2.4k.2G是64k.3G是2M.4G{2013年12月,我国第四代 ...