如图：①首先使用弹性盒子布局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. Hbase架构和读写流程

    转载自:http://www.cnblogs.com/muzili-ykt/p/muzili_ykt.html 在HBase读写时,相同Cell(RowKey/ColumnFamily/Column相 ...

  2. vue 动画过渡

    一.过渡(动画) 1. 简介 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,本质上还是使用CSS3动画:transition.animation 2. 基本用法 1.使用t ...

  3. PHP连接MYSQL操作数据库

    PHP连接MYSQL操作数据库 <?php $con = mysql_connect("localhost","root",""); ...

  4. HDU 1114 Piggy-Bank(完全背包模板题)

    完全背包模板题 #include<cstdio> #include<cstring> #include<algorithm> using namespace std ...

  5. Codeforces Round #425 (Div. 2) C - Strange Radiation

    地址:http://codeforces.com/contest/832/problem/C 题目: C. Strange Radiation time limit per test 3 second ...

  6. Android系统机制

    Android系统机制 本文主要介绍Android系统整体运行机制 Linux中的一些概念 uboot加载系统内核到内存,系统内核运行起来的后,会创建第一个用户进程叫init进程,该进程是所有用户进程 ...

  7. 条件编译#ifdef的妙用详解

    c语言中条件编译相关的预编译指令,包括  #define.#undef.#ifdef.#ifndef.#if.#elif.#else.#endif.defined. #define           ...

  8. 两种ajax的方法

    两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...

  9. [转]HTML标签元素的分类

      在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素. 常用的块状元素有: <div>.<p ...

  10. [转]MySQL查看数据库相关信息

    原文链接:MySQL查看数据库相关信息 使用MySQL时,需要了解当前数据库的情况,例如当前的数据库大小.字符集.用户等等.下面总结了一些查看数据库相关信息的命令 1:查看显示所有数据库 mysql& ...