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= ...
随机推荐
- vite插件-自动生成vue组件文档
特点 支持热更新 快速启动,依赖于 vite,无需另起服务 自动生成组件导航 ui 采用了vant-ui的样式 核心方法覆盖率达到了 92.86% 使用 yarn add vite-plugin-vu ...
- 【LeetCode】61. 旋转链表
61. 旋转链表 知识点:链表: 题目描述 给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置. 示例 输入:head = [1,2,3,4,5], k = 2 输出:[4 ...
- bash的快捷键
ctrl + u取消 当前光标之前的输入 ctrl + k 取消 当前光标之后的输入 ctrl + a 移动 当前光标到行首 ctrl + e 移动 当前光标到行尾
- springMVC-9-异常处理器和拦截器
异常解析器: 用于统一处理 servlet 中的异常; 拦截器: 用于统一处理业务中需要统一处理的页面(比如登录判断等), 可抽取出来统一处理. 我们一般需要在每个页面都通过在session中寻找有无 ...
- 让Angular自定义组件支持form表单验证
Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能.但是如何让我们自定义的组件也支持验证呢? 我遇到一个需求是封 ...
- 计算机基础-Socket
计算机基础-Socket 当时明月在,曾照彩云归. 简介:计算机基础-Socket 一.I/O 模型 一个输入操作通常包括两个阶段: 等待数据准备好 从内核向进程复制数据 对于一个套接字上的输入操作, ...
- session及cookie详解（七）
前言 文章说明 在每整理一个技术点的时候,都要清楚,为什么去记录它.是为了工作上项目的需要?还是为了搭建技术基石,为学习更高深的技术做铺垫? 让每一篇文章都不是泛泛而谈,复制粘贴,都有它对自己技术提升 ...
- 每日三道面试题，通往自由的道路14——MySQL
茫茫人海千千万万,感谢这一秒你看到这里.希望我的面试题系列能对你的有所帮助!共勉! 愿你在未来的日子,保持热爱,奔赴山海! 每日三道面试题,成就更好自我 昨天我们是不是聊到了锁,而你提到了MySQL? ...
- vue的项目初始化
1.创建文件 blog 2.下载安装node mongoose 3.(1)vue创建后端项目文件 vue create admin (2)vue创建前端项目文件 vue create web (3)新 ...
- 电脑常用快捷键及常用的DOS命令
电脑常用快捷键 Ctrl+C:复制 Ctrl+V:粘贴 Ctrl+A:全选 Ctrl+X:剪切 Ctrl+Z:撤销 Ctrl+S:保存 Alt+F4:关闭窗口 Shift+delete:永久删除 Wi ...