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

点击音乐右边的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>

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

js简单实现div宽度匀速增加/减小的更多相关文章

  1. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  2. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  3. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  4. JS简单示例

    首先感谢海棠学院提供的优质视频资源 学习总是一个由简单到难的过程,由浅入深,一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁; 示例代码另存放在github:htt ...

  5. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  6. Uploadify.js引用导致浏览器宽度计算错误，布局混乱

    首先,本人新手,高手勿喷,请忽略.谢谢. 今天在写代码的时候遇到一个奇葩问题,我再在页面加载完成以后,动态计算DIV宽度,将整个层铺满浏览器.一切正常.单当我引入jquery.uploadify.js ...

  7. js 简单的滑动4

    js 简单的滑动教程(四)   作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...

  8. js 简单的滑动1

    js 简单的滑动教程(一)   作者:Lellansin 转载请标明出处,谢谢 首先我们要实现一个简单的滑动,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动. 这个简单滑动的原理是, ...

  9. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

随机推荐

  1. 【C语言学习】《C Primer Plus》第4章 字符串和格式化输入/输出

    学习总结 1.String str=”hello world!”;(Java),char[20]=” hello world!”;(C).其实Java字符串的实现,也是字符数组. 2.字符串的尾部都会 ...

  2. 细说angular Form addControl方法

    在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...

  3. 使用canvas检测HTML5视频解码错误

    乍一看这标题,有点吊炸天的赶脚,canvas跟<video>能有什么联系?不过请放心我不是标题党.事情是这样的: HTML5的<video>标签所支持的视频格式确实有限,mp4 ...

  4. MySQL--使用xtrabackup进行备份还原

    使用rpm包安装xtrabackup ## 安装依赖包 yum -y install perl perl-devel libaio libaio-devel perl-Time-HiRes perl- ...

  5. 用python语言讲解数据结构与算法

    写在前面的话:关于数据结构与算法讲解的书籍很多,但是用python语言去实现的不是很多,最近有幸看到一本这样的书籍,由Brad Miller and David Ranum编写的<Problem ...

  6. Javascript函数节流

    最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> < ...

  7. 知方可补不足~用SqlProfiler来监视数据库死锁

    回到目录 关于锁的相关知识,大家可以看我的这篇文章<知方可补不足~Sqlserver中的几把锁和.net中的事务级别> 死锁我想大家都知道,当一个对话(线程)占用一个资源时,别一个线程也同 ...

  8. 使用 flow.ci 实现 Android 自动化测试与持续集成

    在上篇文章--如何实现 Android 应用的持续部署中,我们使用的是 flow.ci + Github + fir.im 实现 Android 应用的持续部署.对于 Android 开发者,他们可能 ...

  9. Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

    简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...

  10. HTML中的title换行问题

    有时我们需要在html元素的title中换行显示信息.以下几种方法均可以实现: 直接在titile属性中使用换行,如下所示: asd">asdsadsad</a> 在tit ...