如图：①首先使用弹性盒子布局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. Python并行编程(一)：基本概念

    1.线程和进程 进程是应用程序的一个执行实例,比如,在桌面上双击浏览器将会运行一个浏览器.线程是一个控制流程,可以在进程内与其他活跃的线程同时执行.控制流程指的是顺序执行一些机器指令.进程可以包含多个 ...

  2. Notepad++ 更换主题+字体

    Notepad++ 更换主题 https://blog.csdn.net/haluoluo211/article/details/51922666 延伸: 挑选主题 https://blog.csdn ...

  3. mysql 约束条件 auto_increment 自动增长 清空表 自动增长情况

    清空表情况: mysql> delete from t20; Query OK, rows affected (0.00 sec) mysql> show create table t20 ...

  4. myeclipse自动设置类和方法的注释（快捷键）

    类的注释 第一步:找到Window→Preferences→Java→Code Style→Code Templates→Comments→Types 第二步:编辑Pattern,我一般用的模板 /* ...

  5. 004-Shell 基本运算符、算术运算符、关系运算符、布尔运算符、辑运算符、字符串运算符、文件测试运算符

    一.概述 Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 二.算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命 ...

  6. 【spring学习】中文乱码问题

    问题: 在这样的一个控制器中: 返回字符串中文部分全是问号. 解决方案: 在spring-mvc.xml文件中加入以下代码: <!-- 支持spring3.0新的mvc注解 ,解决json中的中 ...

  7. Linux界面交互与目录结构

    一.交互通道 Linux系统环境默认有六个命令交互通道和一个图形界面交互通道,默认进入的是图形界面通道. 命令交互模式切换:ctrl+alt+F1-F6 图形界面交互模式:ctrl+alt+F7   ...

  8. linux怎样使用top命令查看系统状态

    有时候有很多问题只有在线上或者预发环境才能发现,而线上又不能Debug,所以线上问题定位就只能看日志,系统状态和Dump线程. Linux系统可以通过top命令查看系统的CPU.内存.运行时间.交换分 ...

  9. linux 虚拟机设置好固定ip 修改了 dns 网络需要设置成桥接模式

    linux  虚拟机设置好固定ip 修改了 dns  网络需要设置成桥接模式  可以修复网络连接(浏览器返回 server not  found)

  10. windows下Qt5.4.2 for android开发环境配置

    安装包链接: http://yunpan.cn/cFs5tikVA83hK 访问密码 d029   本人所有的软件都安装在D:/Qt   1. 安装 Qt 5.4.2      不在讲述 2, 安装p ...