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

点击音乐右边的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. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

  2. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  3. 100天后 - 100-days-later

    赛斯·高汀(Seth Godin)的博客:  http://sethgodin.typepad.com/seths_blog/2013/04/100-days-later.html 面对着数以千计的图 ...

  4. 怎样记住Integer的最大值（有趣的思维和搞笑的回答）

    前言 今天一个同事问我,数据库里面的某表如果用int做PK,那该表最多可以放多少记录,我说简单啊,就是2^31(正数),跟.NET的Int32.MaxValue一样,约等于20亿(正数)吧.同事说,那 ...

  5. 虚拟化平台cloudstack（6）——使用maven:jetty调试

    调试环境 ubuntu 12.04 JDK1.7 apache-maven-3.10 eclipse 4.2 Juno mysql 5 apache ant JDK的配置和安装 安装可以参考: htt ...

  6. 基于Task的异步模式--全面介绍

    今天是国庆长假第一天,也是今天十月的开始.每到这个时候都是看海的季节-一个看"人海"的季节.反正我是不想在这样一个尴尬期出去放松自己,于是不如在家写写博客,长点本领呢.今天就来给大 ...

  7. 写js写傻了，明天研究一下异步

    在html某元素上绑定一个click事件,该事件是一个执行事件很长的函数,比如执行几十亿或几百亿次加法,那么在这个函数执行的过程中,其他元素绑定的事件,是如何触发的呢,异步触发还是同步,触发时是怎么执 ...

  8. WebApi系列~开放的CORS，跨域资源访问对所有人开放

    回到目录 之前有客户问我,如何AJAX跨域post,这个问题挺有意思,在我们看来,我是不被允许的,因为它是不安全的,但随着web api的火热,这个东西也被人们一步步的接受了,确实,有时,我们的接口希 ...

  9. 手把手教你在VirtualBox中与主机共享文件夹

    安装VirtualBox为了共享文件夹,折腾了一晚上!网上的很多资料都不是很全面,这里就全面的总结一下,如果有其他的疑问,可以留言多多交流. VirtualBox下载地址,版本为5.1.2 设置共享文 ...

  10. [Java工具]Java常用在线工具集合.

    转载申明: 转载自http://www.hollischuang.com/Grepcode SearchCode ProcessOn json.cn diffchecker MaHua .马克飞象 . ...