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

点击音乐右边的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. Spring中Ordered接口简介

    目录 前言 Ordered接口介绍 Ordered接口在Spring中的使用 总结 前言 Spring中提供了一个Ordered接口.Ordered接口,顾名思义,就是用来排序的. Spring是一个 ...

  2. 一个App完成入门篇（五）- 完成新闻页面

    本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面. 导入项目 数据模板分离MVVM模型 自定义事件 展示新闻 九宫格展示 将要学习的demo效果图如下所示 1. 导入完整项目 本节示 ...

  3. 用“MEAN”技术栈开发web应用（二）express搭建服务端框架

    上一篇我们讲了如何使用angular搭建起项目的前端框架,前端抽象出一个service层来向后端发送请求,后端则返回相应的json数据.本篇我们来介绍一下,如何在nodejs环境下利用express来 ...

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

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

  5. HttpContext.Current：异步模式下的疑似陷阱之源

    最近园子里首页有好几篇文章都是讲异步编程的,尤其是几篇讲博客园自身的异步化建设的文章,看了以后很有收获. 闲暇之余再重新查查资料温故知新学习一遍,重新认识了SynchronizationContext ...

  6. 在github上写个人简历——先弄个主页

    起因 不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感,不吐槽了反正就一句话,按照它提供的格式我没法儿写简历,而且面试的时候总会被问道有没有自己作品,哥们儿天天上班,下班 ...

  7. Java框架搭建-Maven、Mybatis、Spring MVC整合搭建

    1. 下载eclipse 到网站下载 http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/marsr 选择 ...

  8. PHP 基础

    var_dump(empty($a));    判断变量是否为空 var_dump(isset($a));      判断变量是否定义 $a=10;unset($a);      删除变量 var_d ...

  9. 日志框架只打印出Mybatis SQL的配置

    项目比较大,各种乱七八糟的框架.Log4j配置的是INFO级别. 然而今天开发的时候我需要log4j打印出SQL的执行情况. 先改log4j的rootLogger级别到DEBUG......后果就是各 ...

  10. 每天一个linux命令（10）：cat 命令

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [选项] [文件] ...