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

来源：互联网发布：彩王四星缩水软件编辑：程序博客网时间：2024/06/08 11:47

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

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

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