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

点击音乐右边的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. 【转】一个lucene的官网例子

    创建索引: import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import jav ...

  2. Yii Model中添加默认搜索条件

    在查询中增加条件 public function defaultScope() { return array( 'condition' => " is_deleted = 0" ...

  3. 让我欲罢不能的node.js

    从我大一接触第一门编程语言C开始,到现在工作三年陆续接触到了C.汇编.C++.C#.Java.JavaScript.PHP,还有一些HTML.CSS神马的,从来没有一门语言让我像对node.js一样的 ...

  4. 如何在 Ubuntu 15.04 上安装带 JSON 支持的 SQLite 3.9

    欢迎阅读我们关于SQLite 的文章,SQLite 是当今世界上使用最广泛的 SQL 数据库引擎,它基本不需要配置,不需要设置或管理就可以运行.SQLite 是一个是公开领域(public-domai ...

  5. hammer.js手势库使用

    hammer.js是一款移动端手势库组件,支持pan(拖动).swipe(滑动).tap(轻触).press(按压,即长按).doubletap(双击)等很多手势操作,提供比较完善的事件监听机制,但是 ...

  6. fir.im Weekly - 2016 开年技术干货分享

    开年上班,北上广的技术er 陆续重返"人间".看到别人已返工写代码,竟然有种慌慌的感觉(ง •̀_•́)ง 勤奋好学如你,fir.im weekly 送上最新一波技术分享供你 &q ...

  7. WPF入门教程系列六——布局介绍与Canvas（一）

    从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感 ...

  8. 【WP 8.1开发】自定义（RAW）通知的使用

    继续前面的话题,还是推送通知.上一篇文章中遗留了RAW通知的推送没有给各位演示,特特地留到现在,不为别的,只为这个RAW通知有点意思,玩起来会比较有意思.官方文档将RAW通知译为“原始通知”,这里还是 ...

  9. PNG使用技巧 PNG的使用技巧

    PNG的格式和透明度 这个Fireworks会比较清楚,打开Fireworkd优化面板,可以清楚看到png有3种不同深度的格式:png8.png24.png32. 其中,在优化面板选择png8,可发现 ...

  10. 【Discuz】-QQ互联登陆提示错误信息：Unknown column 'conuintoken' in 'field list'

    提示信息 discuz! Database Error(1054) Unknown column 'conuintoken' in 'field list'REPLACE INTO common_co ...