JS jquery 菜单栏点击展开收缩基于UC浏览器主页的顶端实现

最新推荐文章于 2022-12-26 13:20:15 发布

选择离开就别回头

最新推荐文章于 2022-12-26 13:20:15 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/zxcasd753651/article/details/53737646

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Web

3 篇文章 0 订阅

订阅专栏

UC浏览器主页的顶端实现

top.js

function top_scroll() {
    var img_src = $("#top_shrink")[0].src;
    $("#top_right").slideToggle("slow");
    if (img_src.indexOf("up")>0){
        $("#top_shrink").attr("src", "img/top_shrink_down.png");
        //document.getElementById("top_right").style.display = "none";
        //document.getElementById("top_shrink").src = "img/top_shrink_down.png";
    }else if(img_src.indexOf("down")>0){
        $("#top_shrink").attr("src", "img/top_shrink_up.png");
        //document.getElementById("top_right").style.display = "block";
        //document.getElementById("top_shrink").src = "img/top_shrink_up.png";
    }

}

index.jsp

<html>
<head>
    <title>UC导航_极速上网体验</title>
    <link rel="stylesheet" type="text/css" href="homePage.css"/>
</head>
<body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/top.js"></script>
<div id="top">
    <a href="javascript:top_scroll();"><img id="top_shrink" src="img/top_shrink_up.png"/></a>
    <div id="top_right">
        <img id="top_home" src="img/top_home.png"/>
        <span id="top_homePage_repair">首页修复</span>
        <span id="top_separator">|</span>
        <span id="top_save_desktop">保存到桌面</span>
        <span id="top_notice">公告:</span>
        <span id="top_notice_content">完美解决“百度搜索打不开”</span>
        <span id="top_login">登录</span>
        <span id="top_register">注册</span>
        <span id="top_qq">QQ群：571531132</span>
    </div>
</div>
</body>
</html>

top.css

body {
    margin: 0px;
    padding: 0px;
    background-color: #F4F4F5;
    font-family: "宋体";
}

#top {
    color: #6A6A6A;
    font-size: 11.5px;
    width: 100%;
}

#top_shrink {
    float: left;
    padding-top: 5px;
    background-color: #E6E6E7;
}
#top_right{
    height: 25px;
    display: block;
    background-color: #E6E6E7;
    padding-top: 5px;
}
#top_home {
    position: relative;
    left: 360px;
    top: -2px;
}

#top_homePage_repair {
    position: relative;
    left: 355px;
    top: -8px;
}

#top_separator {
    position: relative;
    left: 380px;
    top: -8px;
}

#top_save_desktop {
    position: relative;
    left: 410px;
    top: -8px;
}

#top_notice {
    position: relative;
    left: 430px;
    top: -8px;
    color: red;
}

#top_notice_content {
    position: relative;
    left: 435px;
    top: -8px;
    color: red;
}

#top_login {
    position: relative;
    left: 965px;
    top: -8px;
}

#top_register {
    position: relative;
    left: 995px;
    top: -8px;
}

#top_qq {
    position: relative;
    left: 1045px;
    top: -8px;
}

选择离开就别回头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS jquery 菜单栏点击展开收缩基于UC浏览器主页的顶端实现

UC浏览器主页的顶端实现top.jsfunction top_scroll() { var img_src = $("#top_shrink")[0].src; $("#top_right").slideToggle("slow"); if (img_src.indexOf("up")>0){ $("#top_shrink").attr("s
复制链接

扫一扫