如图：①首先使用弹性盒子布局display:flex; flex-wrap:wrap; ②鼠标移上去出现“百度一下，你就知道了”，这句话之前带上各个网站的logo；③logo使用的是sprite，需要注意的是background-position使用的是负值(-)

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09 360导航图片效果</title>
<style>
*{ margin: 0; padding: 0; list-style: none; }
.wrap{
margin: 50px auto;
padding: 10px 0 0 10px;
width: 752px;
border: 1px solid #ccc;
font-family: arial;
}
ul{
display: flex;
flex-flow: wrap;
}
ul li{
position: relative;
margin: 0 10px 10px 0;
width: 178px;
height: 125px;
overflow: hidden;
}
.wrap li div,.wrap li p{
position: absolute;
left: 0;
bottom: -25px;
_bottom: -26px;
width: 100%;
height: 25px;
line-height: 25px;
text-align: center;
color: #fff;
font-size: 14px;
}
.wrap li div{
background-color: rgba(0, 0, 0, 0.5);
}
.wrap li p{
padding-left: 5px;
background: url('images/bg.png') no-repeat 5px 0;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
var div = $("<div></div>"), speed = 388, $p = $(".wrap p");
$p.before(div);
$(".wrap div").fadeTo(0,0.5);
$p.each(function(index, el) {
$(el).css("background-position","5px -"+(index*25)+"px");
});
$("li").hover(function() {
$(this).children('div,p').stop().animate({"bottom":0},speed);
}, function() {
$(this).children('div,p').stop().animate({"bottom":"-25px"},speed);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="data:images/01.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
<li><a href="#"><img src="data:images/02.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
<li><a href="#"><img src="data:images/03.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
<li><a href="#"><img src="data:images/04.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
<li><a href="#"><img src="data:images/05.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
<li><a href="#"><img src="data:images/06.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
<li><a href="#"><img src="data:images/07.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
<li><a href="#"><img src="data:images/08.JPG" alt=""></a><p>百度一下，你就知道啦</p></li>
</ul>
</div>
</body>
</html>

jQuery实际案例④——360导航图片效果的更多相关文章

  1. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  2. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  3. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  4. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  5. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  6. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  7. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  8. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  9. 图片效果集合(js、jquery或html5)

    1.jQuery HTML5 幻灯片使用支持HTML5的浏览器会有特殊效果,即切换图片时颜色的改变文章:http://keleyi.com/a/bjac/b8i3xdui.htm效果:http://k ...

随机推荐

  1. Loki之Funtion

    阅读Loki中Funtion源码之后的个人理解,该库归纳起来可以说有三层(C++设计新思维列举到2个参数,此处列举到3个参数),要记住C++的模板其实就是C语言高级的宏定义,如果用户没有用到对应的模板 ...

  2. 【MFC系列】MFC快速设置控件文本字体、大小、颜色、背景

    以静态文本为例,分享一下怎么修改文本字体.大小.颜色.背景等参数.其他文本.控件等可参照修改. 1.修改字体.大小 这个很简单,首先在Dlg类中声明一个CFont类型的成员变量: 然后在类的初始化函数 ...

  3. getApplicationContext()、Activity.this、 getBaseContext区别

    getApplicationContext()返回应用的上下文,生命周期是整个应用,应用退出它才被摧毁 Activity.this 返回当前activity的上下文,属于activity ,activ ...

  4. yum install mysql on centos 6.5 zz

    http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html 1.使用yum命令进行mysql的安装 yum list ...

  5. 003-spring boot项目的项目属性配置

    一.application.properties文件. 1.项目的配置文件内容.配置了端口,超时连接时间, 2.控制器. 3.访问. 二.application.yml文件 1.application ...

  6. Swap交换分区--continue

    Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这部分内存就是Cache Memory(缓存内存).即使你的程序运行结束后,Cache Memory也不会自动释放.这就会导致你在Lin ...

  7. C#创建类，方法，接口，字段 的 默认类型

    1.在namespace中的类.接口默认是internal类型的,也可以显示的定义为public类型2.在一个类里面,属性和方法默认是private的,可以显示的定义为public.private.p ...

  8. WebSocket安卓客户端实现详解(一)–连接建立与重连

    http://blog.csdn.net/zly921112/article/details/72973054 前言 这里特别说明下因为WebSocket服务端是公司线上项目所以这里url和具体协议我 ...

  9. 【c++ primer, 5e】构造函数 & 拷贝、赋值和析构

    [构造函数] 1.构造器就是创建对象时被调用的代码. 2.如果没有自定义构造器,那么编译器将自动合成一个默认的无参构造器. 3.自定义的构造器不允许加const,所创建const的对象只有在构造器代码 ...

  10. Django学习笔记之django-debug-toolbar使用指南

    介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. github地址 文档地址 安装 pip3 in ...