jQuery最后案例：商标展示
<!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最后案例：商标展示的更多相关文章
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- jQuery常见案例
jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...
- 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- Jquery 分页案例
Jquery 分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统
一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...
- jquery选择器案例
一.预期效果 实现一个效果,如下. 品牌列表默认精简显示,单击“显示全部品牌”按钮显示全部品牌,同时列表将推荐的品牌的名字高亮显示,按钮里的文字变成“精简显示品牌”.再次点击“精简显示品牌”回到初始页 ...
- jQuery 简单案例
案例一:全选.反选.取消实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- Appium -- adb monkey操作（一）
1.Monkey简介在Android的官方自动化测试领域有一只非常著名的"猴子"叫Monkey,这只"猴子"一旦启动,就会让被测的Android应用程序像猴子一 ...
- Leetcode1.两数之和——简洁易懂
> 简洁易懂讲清原理,讲不清你来打我~ 输入一个数组和一个整数,从数组中找到两个元素和为这个整数,输出下标;的方法,guava提供了一个简洁的方法 Maps.newHashMap(); List转换Map List<Solu ...
- UnitTest+HTMLTestRunner实战
框架 步骤 先建立images,reports,tools文件夹 把HTMLTestRunner.py放进tools中 文件内容 https://www.cnblogs.com/wangxue13 ...
- Python脚本：删除文件夹下的重复图片，实现图片去重
近期在整理相册的时候,发现相册中有许多重复图片,人工一张张筛查删除太枯燥,便写下这个脚本,用于删除文件夹下重复的图片. 第一部分:判断两张图片是否相同 要查找重复的图片,必然绕不开判断两张图片是否相同 ...
- 记一次jenkins svn构建过程
本文主要参考:maven实战第11章Hudson持续集成 安装Hudson,Hudson插件下载不了,尝试结果未果,转而使用Jenkins 放入tomcat的webapp目录,在bin下点击start ...
- 误改win10下的windowsapps文件夹权限，导致自带应用闪退问题
在项目中,为了获得相关应用的具体位置(office的具体exe位置),修改了文件夹WindowsApps权限,导致所有自带应用打开闪退. 通过搜索相关资料,获得解决方法: 重置该文件的权限设置 ica ...
- springboot整合ehcache缓存失效
最近做了个微信公众号后台,因为只是单应用就选用了ehcache来做本地缓存,主要是用于缓存微信的accece_token和jsapi_ticket.在使用ehcache的时候遇到了@Cacheable ...
- java小程序之随机任务发布器
需求 自定义任务 随机定时 随机排序 集合输出 搭建 简单项目,所以我使用java 的maven来搭建一个控制台程序,并且使用excel来记录任务 创建任务类(sub) package com.mic ...
- Github连接远程仓库详细操作
首先 咱们需要配置ssh密钥 如何生成密钥呢 我们先来看下命令 在桌面新建一个文件夹,命名规范尽量不要使用中文,然后在文件夹内 新建测试文本: 如图 在文件夹内空白处右击进入GIt b ...