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= ...
随机推荐
- ORB-SLAM3论文阅读：ORB-SLAM3: An Accurate Open-Source Library for Visual, Visual-Inertial and Multi-Map SLAM
简介 ORB-SLAM3是第一个能在单目.双目.RGBD鱼眼相机和针孔相机模型下运行视觉.视觉-惯导以及多地图SLAM的系统.其贡献主要包括两方面:提出了完全依赖于最大后验估计的紧耦合视觉-惯导SLA ...
- python基础之列表推导式
#列表推导式 ---> 返回的是列表 for语句 效率更高# 1*1 2*2 3*3 4*4 5*5 6*6 7*7 8*8 9*9# import time# to = time.clock( ...
- C++：常量
/** https://www.runoob.com/cplusplus/cpp-constants-literals.html * 常量: 固定值,一旦定义不能被修改 * 整数常量:可以是十进制.八 ...
- 【JavaWeb】请求和响应Request&Response
请求 请求对象 关于请求 顾名思义,意思就是请求一个"对象" 请求不到的,别想了 请求,就是使用者希望从服务器端索取一些资源,向服务器发出询问.在B/S架构中,就是客户浏览器向服务 ...
- 第八篇 -- 用U盘制作启动盘装Win10系统
下载装机吧:http://www.zhuangjiba.com 装Win10参考文章:http://www.zhuangjiba.com/bios/13249.html U盘启动盘制作 1.首先将U盘 ...
- JDK的安装与配置java环境变量
JDK安装与配置java环境变量 安装JDK 1.百度搜索jdk8找到下载地址 下载地址:Java SE Development Kit 8 - Downloads (oracle.com) 2.点击 ...
- Excel VBA活动抽奖小程序
在活动中,我们常会有抽奖,抽奖箱准备繁琐,现在多采用线上抽奖方式,下面用Excel VBA写了一个简单的抽奖小程序 简单测试效果如下,可实现: 多次抽奖,且每次抽奖都不重复 抽奖界面滚动人员信息,点击 ...
- Android面试官：说说你对 Binder 驱动的了解？
面试官提了一个问题:说说你对 binder 驱动的了解.这个问题虽有些 "面试造火箭" 的无奈,可难点就是亮点.价值所在,是筛选面试者的有效手段.如果让你回答,你能说出多少呢?我们 ...
- Tomcat服务器种的HttpServletRequest类
HttpServletRequest 类有什么作用: 每次只要有请求进入 Tomcat 服务器,Tomcat 服务器就会把请求过来的 HTTP 协议信息解析好封装到 Reque ...
- 痞子衡嵌入式：在IAR开发环境下将关键函数重定向到RAM中执行的三种方法
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在IAR开发环境下将关键函数重定向到RAM中执行的三种方法. 嵌入式项目里应用程序代码正常是放在 Flash 中执行的,但有时候也需要将 ...