您的位置：首页 > Web前端 > JQuery

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

2016-12-19 12:02 507 查看

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery uc浏览器 javascript

相关文章推荐

新的分享

章节导航

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

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