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

点击音乐右边的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. 继续送假期干货——响应式图片工具smartImg

    中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...

  2. 在asp.net WebAPI 中 使用Forms认证和ModelValidata(模型验证)

    一.Forms认证 1.在webapi项目中启用Forms认证 Why:为什么要在WebAPI中使用Forms认证?因为其它项目使用的是Forms认证. What:什么是Forms认证?它在WebAP ...

  3. 强大的Sublime编辑器

    Sublime是一款功能非常强大的轻量级的代码及文本编辑工具,有关它的介绍和下载可以从官网http://www.sublimetext.com获取.尽管Sublime并非是一款完全免费的IDE开发工具 ...

  4. Oracle数据库分页的三种方法

    -- 不能对ROWNUM使用>(大于1的数值).>=(大于或等于1的数值).=(大于或等于1的数值),否则无结果-- 所以直接用只能从1开始-- rownum >10 没有记录,因为 ...

  5. Redis主从复制问题和扩容问题的解决思路

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/106.html?1455867541 一.解决主从复制问题 当使用Redi ...

  6. Atitit 面向对象弊端与问题 坏处 缺点

    Atitit 面向对象弊端与问题 坏处 缺点   1.1. 状态fsm,反模块化,又是反并行的,这是它的非常固有的特征, 1 1.2. 现时的OOP编程有可能不缓存友好(cache friendly) ...

  7. Atitit usrQBM1603短信验证码规范

    Atitit usrQBM1603短信验证码规范 短信验证码扩展至短信服务和验证码服务1 主要方法1 参考模板1 短信验证码扩展至短信服务和验证码服务 主要方法 Line 27: public cla ...

  8. Atitit java 二维码识别 图片识别

    Atitit java 二维码识别 图片识别 1.1. 解码11.2. 首先,我们先说一下二维码一共有40个尺寸.官方叫版本Version.11.3. 二维码的样例:21.4. 定位图案21.5. 数 ...

  9. Atitit mtp ptp rndis midi协议的不同区别

    Atitit mtp ptp rndis midi协议的不同区别 1. PTP:1 2. MTP:1 3. Mtp 与usb区别2 4. 不过和UMS相比,MTP也有不足之处:3 5.  MTP协议介 ...

  10. Leetcode 69 Sqrt(x) 二分查找（二分答案）

    可怕的同时考数值溢出和二分的酱油题之一,常在各种小公司的笔试中充当大题来给你好看... 题意很简单,在<二分查找综述>中有描述. 重点:使用简单粗暴的long long来避免溢出,二分均方 ...