jquery02-09图片网站导航效果

最新推荐文章于 2022-02-26 22:00:26 发布

python基础教程

最新推荐文章于 2022-02-26 22:00:26 发布

阅读量356

点赞数

分类专栏： 02jquery

本文链接：https://blog.csdn.net/stopcpp/article/details/53054889

版权

02jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

python基础教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery02-09图片网站导航效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } img{ vertical-
复制链接

扫一扫