图片导航效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         li{

             list-style: none;

         }

         a{

             text-decoration: none;

         }

         .wrap{

             width: 752px;

             border:1px solid #c1c1c1;

             padding: 10px 0 0 10px;

             margin:100px auto;

             overflow: hidden;

         }

         .wrap li{

             width: 178px;

             height: 125px;

             float: left;

             margin:0 10px 10px 0;

             position: relative;

             overflow: hidden;

         }

         .wrap li p{

             width: 178px;

             text-align: center;;

             background-color: #6a6a6a;

             background-position: 5px 0;

             color: #ffffff;

             position: absolute;

             left:0;

             bottom:-26px;

         }

     </style>

     <script src="jquery-1.11.1.min.js"></script>

     <script>

         $(document).ready(function(){

             $(".wrap li").append("<div></div><p>全栈，你值得拥有</p>").children("div").fadeTo(0,0.5).next("p").each(function(index,ele){//ele指向当前对象p

                 $(ele).css("background-position","5px -"+index*25+"px");

             }).parent();

             $(".wrap li").mouseenter(function(){

                 $(this).children("div,p").stop().animate({

                         "bottom":0,

                 },400);

             }).mouseleave(function(){

                 $(this).children("div,p").stop().animate({

                     "bottom":"-26px"

                 },400);

             });

         });

     </script>

 </head>

 <body>

 <div class="wrap">

     <ul>

         <li><a href=""><img src="data:images/01.JPG" alt=""></a></li>

         <li><a href=""><img src="data:images/02.JPG" alt=""></a></li>

         <li><a href=""><img src="data:images/03.JPG" alt=""></a></li>

         <li><a href=""><img src="data:images/04.JPG" alt=""></a></li>

         <li><a href=""><img src="data:images/05.JPG" alt=""></a></li>

         <li><a href=""><img src="data:images/06.JPG" alt=""></a></li>

         <li><a href=""><img src="data:images/07.JPG" alt=""></a></li>

         <li><a href=""><img src="data:images/08.JPG" alt=""></a></li>

     </ul>

 </div>

 </body>

 </html>

运行效果：

第74天：jQuery实现图片导航效果的更多相关文章

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

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

  2. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  3. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  4. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  5. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  6. jquery 鼠标图片经过效果

    <script> //鼠标图片经过效果 $(function(){ $(".jione_box ").css("background-color", ...

  7. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  8. jquery实现图片漂浮效果

    $(window).load(function(){   function moveRocket(){   $("#float").animate({'left':'+=100'} ...

  9. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

随机推荐

  1. 20155317 王新玮 2006-2007-2 《Java程序设计》第4周学习总结

    20155317 王新玮 2006-2007-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承共同行为 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那 ...

  2. vim 多个文件切换

    打开多个文件:1.vim还没有启动的时候:在终端里输入 vim file1 file2 ... filen便可以打开所有想要打开的文件2.vim已经启动输入:open file可以再打开一个文件,并且 ...

  3. 【LG4609】[FJOI2016]建筑师

    [LG4609][FJOI2016]建筑师 题面 洛谷 题解 (图片来源于网络) 我们将每个柱子和他右边的省略号看作一个集合 则图中共有\(a+b-2\)个集合 而原来的元素中有\(n-1\)个(除去 ...

  4. CF 1083 A. The Fair Nut and the Best Path

    A. The Fair Nut and the Best Path https://codeforces.com/contest/1083/problem/A 题意: 在一棵树内找一条路径,使得从起点 ...

  5. springmvc controller常见问题

    controller 的各种操作都是依赖服务器启动后来注入很多功能的,所以热部署经常会没有效果(因为没有被注入,除非在 方法名() 的括号中定义对象 [ 例如: HttpServletResponse ...

  6. linux中生成考核用的NTFS文件系统结构样例

    实验NTFS-1说明:NTFS-1.img是一个包含NTFS文件系统的磁盘镜像,请使用winhex手工方式读出这个文件系统内的指定文件,并回答其md5 HASH值.要求: 1.利用WINHEX手工方式 ...

  7. div不设置高度背景颜色或外边框不能显示的解决方法

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题. 大体结构<div class="oute ...

  8. Query类型_JDBC的方法_JAVA方法_Loadrunner脚本

    数据库查询压力测试脚本 jdbc_java_查询类型接口测试 package com.test; import java.sql.Connection; import java.sql.DriverM ...

  9. 各web服务器的特点和优势

    1.Tomcat 和 Jetty 面向java语言 天生就是重量级的web服务器.性能一般 2.IIS 只能在windows平台运行,windows作为服务器在稳定性与其他一些性能上不如类unix操作 ...

  10. redis 为什么快

    redis采用自己实现的事件分离器,效率比较高,内部采用非阻塞的执行方式,吞吐能力比较大. 不过,因为一般的内存操作都是简单存取操作,线程占用时间相对较短,主要问题在io上,因此,redis这种模型是 ...