效果类似百度首页音乐盒。
点击音乐右边的div可以变长或者变短。
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0 10 } 11 body{ 12 background: #121B18; 13 } 14 .txt{ 15 50%; 16 margin: 100px auto; 17 position: relative; 18 } 19 .mask{ 20 0px; 21 height: 50px; 22 overflow: hidden; 23 position: absolute; 24 left: 0; 25 display: none; 26 background: #5D6A5D; 27 28 } 29 .right{ 30 float: left; 31 position: relative; 32 33 } 34 .gouzi{ 35 float: left; 36 30px; 37 height: 50px; 38 color: #fff; 39 text-align: center; 40 position: relative; 41 background: #4F6151; 42 } 43 .yinyue{ 44 position: absolute; 45 top: 11px; 46 left: 0; 47 } 48 .content{ 49 color: #fff; 50 700px; 51 } 52 .clear{ 53 clear: both; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="txt" draggable="true"> 59 <div class="gouzi" id="holdTxt"><span class="yinyue">音乐</span></div><!--钩子--> 60 <div class="right"> 61 <div class="mask" id="mask"><!--遮罩层--> 62 <div class="content">我是内容</div> 63 </div> 64 <div class="clear"></div><!--清除浮动 --> 65 </div> 66 </div> 67 </body> 68 <script> 69 var holdTxt = document.getElementById("holdTxt"); 70 var mask = document.getElementById("mask"); 71 72 function addW(iWidthMin,iWidthMax,iSpeed){//增加/减小宽度函数，iWidthMin为最小宽度，iWidthMax为最大宽度，iSpeed为速度 73 mask.style.display="block"; 74 if(iSpeed>0){//判断是增加宽度还是减小宽度 75 if(mask.offsetWidth<iWidthMax){//临界值判断 76 mask.style.width=mask.offsetWidth+iSpeed+"px";//offsetWidth:元素的宽度，边框，内边距，内容之和，不包括外边距的。 77 } 78 }else{ 79 if(mask.offsetWidth>iWidthMin){ 80 mask.style.width=mask.offsetWidth+iSpeed+"px"; 81 } 82 } 83 84 85 } 86 var timer=null; 87 var flag=0; 88 holdTxt.onclick=function(){ 89 clearInterval(timer);//清除上一次的定时器 90 if(flag==0){//如果flag==0,执行增加宽度函数 91 timer = setInterval(function(){ 92 addW(0,700,10); 93 },20); 94 flag=1;//让flag=1,下次点击就执行减小宽度函数 95 96 }else if(flag==1){ 97 timer = setInterval(function(){ 98 addW(0,400,-10); 99 },20); 100 flag=0; 101 102 } 103 104 105 } 106 </script> 107 </html>
效果好丑（没有加太多修饰）：
