如图：①首先使用弹性盒子布局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 web框架 django工程的创建

    安装 django pip3 install django pip install django 安装完后出现这两个文件 django-admin 用来创建文件夹 在script目录 执行这个命令 d ...

  2. MySQL对指定字段进行加密(双向加密)

    1:建表 test create table test( name varchar(200), value blob ); 插入数据 使用 ENCODE 加密: ,ENCODE('加密字段值', '钥 ...

  3. vim高亮显示文本

    行列高亮设置 • 行高亮 " 设置高亮行的颜色,ctermbg设定背景色,ctermfg设定前景色 set cursorline hi CursorLine cterm=NONE cterm ...

  4. beego——日志处理

    这是一个用来处理日志的库,它的设计思路来自于 database/sql,目前支持的引擎有 file.console.net.smtp,可以通过如下方式进行安装: go get github.com/a ...

  5. XDU 1003 B进制加法(高精度)

    #include<bits/stdc++.h> using namespace std; long long mpow(long long a,long long b) { ; ) ; w ...

  6. GoDaddy用支付宝付款时出现我们无法处理这笔交易，请查看您的付款信息并重试。

    一.GoDaddy操作流程 在GoDaddy上购买及注册域名的操作步骤,请参考https://www.jianshu.com/p/05289a4bc8b2进行操作. 二.我遇到的问题 今天用GoDad ...

  7. 28UDP

    UDP通信流程步骤: 服务端: 等待(被动)接收发送 1: 创建 socket:  socket() 2: 绑定端口:      bind() 3: 读取消息:      read() 4: 发送消息 ...

  8. hdu2609 How many

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=2609 题目: How many Time Limit: 2000/1000 MS (Java/Others ...

  9. 金融 贷款类 App 审核被拒 4.3 1.2 2.1 4.2.2 问题总结

    辛辛苦苦搞了一两个月,开发测试修bug,一路艰辛,到了审核这最后一关,各位同仁,咬紧牙关!接下来是鄙人遇到过的被拒问题,望能帮到诸君! ******************************** ...

  10. 如何高效的遍历HashMap 以及对key 进行排序

    Map<Integer ,Object> map = new HashMap<Integer,Object>(); for(int i = 0; i<=100;i++){ ...