js简单实现div宽度匀速增加/减小

效果类似百度首页音乐盒。

点击音乐右边的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             width: 50%;
 16             margin: 100px auto;
 17             position: relative;
 18         }
 19         .mask{
 20             width: 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             width: 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             width: 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.οnclick=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>

效果好丑（没有加太多修饰）：

转载于:https://www.cnblogs.com/hongrunhui/p/5191574.html

js简单实现div宽度匀速增加/减小相关推荐

js简单实现div圆角
原文 [url]http://www.w3pop.com/comm/view/id/311/[/url] 这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的.它 ...
JS实现div宽度、高度拉伸
一.JavaScript实现宽度高度自动缓慢拉伸 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
js制作一个简单的div弹窗：
js制作一个简单的div弹窗: 演示地址:http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ <!DOCTYPE html ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
JS动态获取DIV的宽度和高度px！
JS动态获取div的宽度: var o = document.getElementById("div"); var width= o.clientWidth||o.offsetWi ...
js控制使div自动适应居中
一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...
js 简单的滑动教程（四）
作者:Lellansin 转载请标明出处,谢谢在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程前几篇中的代码,还存在着bug, ...
jquery动态改变div宽度和高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
H5原生js简单拼图游戏
H5原生js简单拼图游戏演示地址效果展示源码 index.html puzzle.css puzzle.js 源码下载演示地址链接: 演示地址效果展示源码 index.html < ...

js简单实现div宽度匀速增加/减小

js简单实现div宽度匀速增加/减小相关推荐

最新文章

热门文章