html页面元素代码
<div id="name"></div>
<div id="sus_window">
<div id="click_me"></div>
<div>
<ul id="nameList">
<li><a href="#">一二三</a></li>
<li><a href="#">四五六</a></li>
<li><a href="#">七八九</a></li>
<li><a href="#">亿亿亿亿</a></li>
<li><a href="#">万万万万</a></li>
<li><a href="#">千千千千</a></li>
<li><a href="#">百百百百</a></li>
<li><a href="#">十十十十</a></li>
<li><a href="#">个个个个</a></li>
<li><a href="#">一二三四五六七八九亿亿亿亿</a></li>
</ul>
</div>
</div>
css样式代码
* {margin:0;padding:0;box-sizing:border-box;}
#name{
margin-top: 20%;
text-align: center;
font-size: 40px;
color: #0e96e6;
}
#sus_window{
width:300px;
position:fixed;
_position:absolute;
right:0;
top:40%;
background:#fff;
padding-left: 30px;
z-index:88;
}
#click_me{
width:30px;
height:100%;
float:left;
cursor:pointer;
background:#0e96e6;
text-align:center;
padding: 5px 0;
color: white;
margin-left: -30px;
}
ul{
list-style: none;
}
li{
width:100%;
height: 33px;
text-align:left;
background-color: rgba(12, 3, 146, 1);
border-top: 1px solid #043B46;
line-height: 33px;
}
a{
text-decoration: none;
margin-left:20px;
color: #bfbfbf;
font-size:12px;
font-family: 'Microsoft Yahei';
}
li.active {
width: 290px;
background-color: rgba(2, 27, 38, 0.87);
border-left: 4px solid #00ffff;
border-top: 0px;
}
li.active a{
color: #00ffff;
}
ul li:hover {
width: 290px;
background-color: rgba(2, 27, 38, 0.87);
border-left: 4px solid #00ffff;
}
ul li:hover a{
color: #00ffff;
}
js相关代码
var name='初始化名称';
window.onload = function() {
$("#name").html(name);
$(document).ready(function(){
$("#nameList li").click(function(){
//获取选中的li里面的值
name=$(this).text();
//把值放在id=name里面,显示
$("#name").html(name);
click_me.onclick();
console.log(name);
}) ;
});
var combox = document.getElementById("sus_window");
var click_me = document.getElementById("click_me");
var flag = true, timer = null, initime = null, r_len = 0;
click_me.onclick = function () {
clearTimeout(initime);
//根据状态flag执开展开收缩
if (flag) {
r_len = 0;
timer = setInterval(slideright, 10);
} else {
r_len = -270;
timer = setInterval(slideleft, 10);
}
}
//展开
function slideright() {
$("#click_me").html('点我查看');
if (r_len <= -270) {
clearInterval(timer);
flag = !flag;
return false;
} else {
r_len -= 5;
combox.style.right = r_len + 'px';
}
}
//收缩
function slideleft() {
$("#click_me").html('点我收缩');
if (r_len >= 0) {
clearInterval(timer);
flag = !flag;
return false;
} else {
r_len += 5;
combox.style.right = r_len + 'px';
}
}
//加载后0秒页面自动收缩
initime=setTimeout("click_me.click()");
}
还需要引入jQuery.js
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
//自己也可以从网上去找