jquery02-09图片网站导航效果

来源：互联网发布：淘宝客服一般几点下班编辑：程序博客网时间：2024/06/05 06:38
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin: 0;            padding: 0;        }        img{            vertical-align: top;        }        .wrap{            width: 775px;            height: 285px;            border: 1px solid #ccc;            margin: 100px auto;        }        .wrap ul{            list-style:none;            padding: 5px 5px;        }        .wrap ul li{            float: left;            padding: 3px 5px;            position: relative;            height: 135px;            overflow: hidden;        }        .wrap ul li img{            width: 180px;            height: 130px;            display: block;        }        .wrap div{            width: 178px;            height: 25px;            background:#000;            position: absolute;            bottom: -25px;            /*opacity: 0.5;*/            /*filter:alpha(opacity=40);*/        }        .wrap p{            width: 178px;            height: 25px;            /*background:url("images/bg.png") no-repeat 5px 0;*/            line-height: 25px;            text-align: center;            font-size: 14px;            color:white;            position: absolute;            bottom: -25px;        }    </style>    <script src="jquery-1.11.1.min.js"></script>    <script>        $(function () {           $(".wrap li")                   .append("<div></div><p>百度一下，你就知道</p>")                   .children("div")                   .fadeTo(500,0.5)                   .next("p")                   .each(function (index, ele) {                       $(this).css("background-position","5px -"+(index * 25) +"px");                   })                   .parent()                   .mouseenter(function () {                       $(this).children("div,p").stop().animate({                           "bottom":"0px"                       },400);                   }).mouseleave(function () {                       $(this).children("div,p").stop().animate({                           "bottom":"-25px"                       },400);                   })           ;//            $(".wrap li").mouseenter(function () {//                $(this).children("div,p").stop().animate({//                    "bottom":"0px"//                },400);//            }).mouseleave(function () {//                $(this).children("div,p").stop().animate({//                    "bottom":"-25px"//                },400);//            });        });    </script></head><body><div class="wrap">    <ul>        <li><a href="#"><img src="chrome://thumb/http://www.baidu.com/" alt=""/></a></li>        <li><a href="#"><img src="chrome://thumb/http://www.sohu.com/" alt=""/></a></li>        <li><a href="#"><img src="chrome://thumb/http://weibo.com/?c=spr_qdhz_bd_360aqllqdh_weibo_001" alt=""/></a></li>        <li><a href="#"><img src="chrome://thumb/http://u.ctrip.com/union/CtripRedirect.aspx?TypeID=2&Allianceid=323047&sid=803568&OUID=&jumpUrl=http://www.ctrip.com" alt=""/></a></li>        <li><a href="#"><img src="chrome://thumb/http://www.360kan.com/?src=se_newtab_zcfw" alt=""/></a></li>        <li><a href="#"><img src="chrome://thumb/http://www.taobao.com/" alt=""/></a></li>        <li><a href="#"><img src="chrome://thumb/http://www.163.com/" alt=""/></a></li>        <li><a href="#"><img src="chrome://thumb/http://www.sina.com.cn/" alt=""/></a></li>    </ul></div></body></html>
0 0