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= ...
随机推荐
- HelloWord！
HelloWorld 1.新建一个文件夹,存放代码 2.新建一个java文件后缀为.java Hello.java (注意后缀 如系统没打开显示后缀需要打开) 3.编写HelloWorld代码 (建议 ...
- IDEA搭建springmvc环境之后无故出现404
其实这应该是IDEA的自身问题 打开项目结构
- like %和-的区别与使用
通配符的分类: %百分号通配符:表示任何字符出现任意次数(可以是0次). 下划线通配符:表示只能匹配单个字符,不能多也不能少,就是一个字符. like操作符: LIKE作用是指示mysql后面的搜索模 ...
- 素数（质数）（Java版）
4.输出质数(素数) 素数(质数):是指在大于1的自然数中,除了1和它本身外,不能被其他自然数整除(除0以外)的数 public class PrimeNumber { public static v ...
- 每日三道面试题，通往自由的道路14——MySQL
茫茫人海千千万万,感谢这一秒你看到这里.希望我的面试题系列能对你的有所帮助!共勉! 愿你在未来的日子,保持热爱,奔赴山海! 每日三道面试题,成就更好自我 昨天我们是不是聊到了锁,而你提到了MySQL? ...
- element UI table 状态显示:禁用-启用 上架-下架
vue2.0+elementUI 解决表单上架下架状态的切换 https://blog.csdn.net/weixin_42507803/article/details/81910297 <el ...
- K8S为什么要弃用Docker？Dockershim将移除
一.背景由于最近知道了 K8s 新版本(v1.20)确定弃用 Docker 的消息,为了明确是否会对现有系统架构产生响,所以对涉及到的相关技术进行了一定的梳理(索性的是对现有的系统架构基本无影响:&g ...
- 双非本科Android开发，如何逆袭拿到大厂 Offer？
从2020年3月18日投出第一份暑期实习简历至今,已经过去400多天.我也尘埃落定,即将去CVTE做Android开发. 休息了很长时间,如今已经能够很平静地回首这段历程,写下这篇文,致敬曾经走过的漫 ...
- Android 已发行多年，移动 App 已经趋近饱和，那么 Android 开发还会有那么吃香吗？
一.关于Android的前景 不断地也听见很多人在谈做Android是否还有前途.Android研发在走下坡路了.Android的工作太难找了.Android是不是已经凉了...... 对于这些其实我 ...
- Spring MVC+javamail实现邮件发送
Spring MVC+javamail实现邮件发送 开启邮箱的POP3/SMTP服务(这里以QQ邮箱举例) 设置 --> 账户 -- > 开启POP3/STMP服务,然后得到一个授权码. ...