jQuery实际案例④——360导航图片效果

如图:①首先使用弹性盒子布局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="images/01.JPG" ></a><p>百度一下,你就知道啦</p></li>
<li><a href="#"><img src="images/02.JPG" ></a><p>百度一下,你就知道啦</p></li>
<li><a href="#"><img src="images/03.JPG" ></a><p>百度一下,你就知道啦</p></li>
<li><a href="#"><img src="images/04.JPG" ></a><p>百度一下,你就知道啦</p></li>
<li><a href="#"><img src="images/05.JPG" ></a><p>百度一下,你就知道啦</p></li>
<li><a href="#"><img src="images/06.JPG" ></a><p>百度一下,你就知道啦</p></li>
<li><a href="#"><img src="images/07.JPG" ></a><p>百度一下,你就知道啦</p></li>
<li><a href="#"><img src="images/08.JPG" ></a><p>百度一下,你就知道啦</p></li>
</ul>
</div>
</body>
</html>

时间: 2024-10-14 21:03:08

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

jquery实现的随机显示图片效果代码

jquery实现的随机显示图片效果代码:下面介绍一下,点击按钮就可以实现图片的随机切换效果,代码实现非常的简单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <tit

jquery实现的一个导航滚动效果

在做校园网视频网站的时候,首页有一个导航页面要实现滚动效果,有样例,但代码是在难弄懂,貌似网页设计这块还是只有自己的代码自己懂,索性就仿造别人的效果自己做了一个,大体上还行,看起来还是比较流畅的,不次于原作的幺. 现在先把代码拷贝到这里,以后再逐一简化修改: 实现混动效果,脚本代码如下: var all=0; //滚动单位的个数 var no=0; //当前要滚动的位置,每隔短时间递增 var s_width=0; //滚动单位的宽度 $(document).ready(function(){

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

今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示     下载源码 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 本文

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

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

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

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

CSS3结合jQuery制作的冒泡工具图片提示效果

一款基于CSS3技术的冒泡提示效果,为了演示效果,生成了许多冒泡的提示,实际使用中,可能不需要这么多,结合jQuery和jquery UI共同实现的网页提示特效,挺不错.因CSS不支持IE8及以下低版本,所以请使用IE9.chrome或火狐测试. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

jQuery实现侧边导航栏效果

效果图: 以下是完整代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="JS代码,侧边菜单,拉出菜单,高级菜单,导航菜单,jquery菜单" /><met

jquery实现导航栏效果

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <div class="box"> <ul class="menu"> <li

基于jquery仿360网站图片选项卡切换代码

今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slides"> <div class="in widget-slide" data-jss="tabSelector : '.slide-nav li', viewSe