效果类似百度首页音乐盒。
点击音乐右边的div可以变长或者变短。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0
}
body{
background: #121B18;
}
.txt{
width: 50%;
margin: 100px auto;
position: relative;
}
.mask{
width: 0px;
height: 50px;
overflow: hidden;
position: absolute;
left: 0;
display: none;
background: #5D6A5D; }
.right{
float: left;
position: relative; }
.gouzi{
float: left;
width: 30px;
height: 50px;
color: #fff;
text-align: center;
position: relative;
background: #4F6151;
}
.yinyue{
position: absolute;
top: 11px;
left: 0;
}
.content{
color: #fff;
width: 700px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="txt" draggable="true">
<div class="gouzi" id="holdTxt"><span class="yinyue">音乐</span></div><!--钩子-->
<div class="right">
<div class="mask" id="mask"><!--遮罩层-->
<div class="content">我是内容</div>
</div>
<div class="clear"></div><!--清除浮动 -->
</div>
</div>
</body>
<script>
var holdTxt = document.getElementById("holdTxt");
var mask = document.getElementById("mask"); function addW(iWidthMin,iWidthMax,iSpeed){//增加/减小宽度函数，iWidthMin为最小宽度，iWidthMax为最大宽度，iSpeed为速度
mask.style.display="block";
if(iSpeed>0){//判断是增加宽度还是减小宽度
if(mask.offsetWidth<iWidthMax){//临界值判断
mask.style.width=mask.offsetWidth+iSpeed+"px";//offsetWidth:元素的宽度，边框，内边距，内容之和，不包括外边距的。
}
}else{
if(mask.offsetWidth>iWidthMin){
mask.style.width=mask.offsetWidth+iSpeed+"px";
}
} }
var timer=null;
var flag=0;
holdTxt.onclick=function(){
clearInterval(timer);//清除上一次的定时器
if(flag==0){//如果flag==0,执行增加宽度函数
timer = setInterval(function(){
addW(0,700,10);
},20);
flag=1;//让flag=1,下次点击就执行减小宽度函数 }else if(flag==1){
timer = setInterval(function(){
addW(0,400,-10);
},20);
flag=0; } }
</script>
</html>
效果好丑（没有加太多修饰）：
