右侧点击可伸缩悬浮窗动态修改页面文字

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>
//自己也可以从网上去找