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= ...
随机推荐
- Requests 方法 -- post请求操作实践
1.登录Jenkins抓包 ,小编的Jenkins部署在Tomcat上,把Jenkins.war 包放置到webapps目录. 本次用浏览器自带抓包,按下F12操作,主要看post就可以,登录是向服务 ...
- 【洛谷P1318积水面积】最小生成树
我写一篇绝对原创的题解,算法原创,求洛谷通过!!!(让更多人看到这篇题解) 绝大多数人肯定认为这道题是一道模拟题 以下为正解 我们来看一下这一道题,其实就是找到左右高点,在模拟. 但是这个是正常人的想 ...
- Python基础之用PyQt5界面代码分离以及自定义一个槽函数
最近开发一个项目,需要用到界面,遇到界面不能实时更新的问题,看到网上很多用槽函数,但是大多都是些button的,并不是我需要的,要么就是整数的,后来自己进行尝试,写了一个自定义的槽函数处理treewi ...
- Python - 浅拷贝的四种实现方式
浅拷贝详解 https://www.cnblogs.com/poloyy/p/15084277.html 方式一:使用切片 [:] 列表 # 浅拷贝 [:] old_list = [1, 2, [3, ...
- 【阿菜读论文】ContractFuzzer：fuzzing方法挖掘智能合约漏洞
论文简介 论文标题:ContractFuzzer: Fuzzing Smart Contracts for Vulnerability Detection 论文链接:ContractFuzzer: F ...
- Django JSONField/HStoreField SQL注入漏洞（CVE-2019-14234）
复现 访问http://192.168.49.2:8000/admin 输入用户名admin ,密码a123123123 然后构造URL进行查询,payload: http://192.168.49. ...
- 记录21.07.20 —— js语言回顾
js语言回顾 1.语法 a并没有声明,也可以输出,不会报错. 添加一条语句 则需要声明,称之为严谨语法 2.数组 2.1数组遍历三种方法 for-in与for-of forEach forEach调用 ...
- C++ //纯虚函数和抽象类 // 语法 virtual 返回值类型 函数名 （参数列表）=0 //当类中有了纯虚函数 这个类也称为抽象类
1 //纯虚函数和抽象类 2 // 语法 virtual 返回值类型 函数名 (参数列表)=0 3 //当类中有了纯虚函数 这个类也称为抽象类 4 5 6 #include <iostream& ...
- Git点赞82K！字节跳动保姆级Android学习指南，干货满满
这是一份全面详细的<Android学习指南>,如果你是新手,那么下面的内容可以帮助你找到学习的线路:如果你是老手,这篇文章列出的内容也可以帮助你查漏补缺.如果各位有什么其他的建议,欢迎留言 ...
- 清晰易懂的RxJava入门实践
导入 我相信大家肯定对ReactiveX 和 RxJava 都不陌生,因为现在只要是和技术相关的网站,博客都会随处见到介绍ReactiveX和RxJava的文章. ReactiveX Reactive ...