js简单实现div宽度匀速增加/减小

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

点击音乐右边的div可以变长或者变短。

代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0
 10         }
 11         body{
 12             background: #121B18;
 13         }
 14         .txt{
 15             width: 50%;
 16             margin: 100px auto;
 17             position: relative;
 18         }
 19         .mask{
 20             width: 0px;
 21             height: 50px;
 22             overflow: hidden;
 23             position: absolute;
 24             left: 0;
 25             display: none;
 26             background: #5D6A5D;
 27             
 28         }
 29         .right{
 30             float: left;
 31             position: relative;
 32 
 33         }
 34         .gouzi{
 35             float: left;
 36             width: 30px;
 37             height: 50px;
 38             color: #fff;
 39             text-align: center;
 40             position: relative;
 41             background: #4F6151;
 42         }
 43         .yinyue{
 44             position: absolute;
 45             top: 11px;
 46             left: 0;
 47         }
 48         .content{
 49             color: #fff;
 50             width: 700px;
 51         }
 52         .clear{
 53             clear: both;
 54         }
 55     </style>
 56 </head>
 57 <body>
 58     <div class="txt" draggable="true">
 59         <div class="gouzi" id="holdTxt"><span class="yinyue">音乐</span></div><!--钩子-->
 60         <div class="right">
 61             <div class="mask" id="mask"><!--遮罩层-->
 62                 <div class="content">我是内容</div>
 63             </div>
 64             <div class="clear"></div><!--清除浮动 -->
 65         </div>
 66     </div>
 67 </body>
 68     <script>
 69         var holdTxt = document.getElementById("holdTxt");
 70         var mask = document.getElementById("mask");
 71 
 72         function addW(iWidthMin,iWidthMax,iSpeed){//增加/减小宽度函数,iWidthMin为最小宽度,iWidthMax为最大宽度,iSpeed为速度
 73             mask.style.display="block";
 74             if(iSpeed>0){//判断是增加宽度还是减小宽度
 75                 if(mask.offsetWidth<iWidthMax){//临界值判断
 76                     mask.style.width=mask.offsetWidth+iSpeed+"px";//offsetWidth:元素的宽度,边框,内边距,内容之和,不包括外边距的。
 77                 }
 78             }else{
 79                 if(mask.offsetWidth>iWidthMin){
 80                     mask.style.width=mask.offsetWidth+iSpeed+"px";
 81                 }
 82             }
 83             
 84             
 85         }
 86         var timer=null;
 87         var flag=0;
 88         holdTxt.onclick=function(){
 89             clearInterval(timer);//清除上一次的定时器
 90             if(flag==0){//如果flag==0,执行增加宽度函数
 91                 timer = setInterval(function(){
 92                                 addW(0,700,10);
 93                             },20);
 94                 flag=1;//让flag=1,下次点击就执行减小宽度函数
 95                 
 96             }else if(flag==1){
 97                 timer = setInterval(function(){
 98                                 addW(0,400,-10);
 99                             },20);
100                 flag=0;
101                 
102             }
103             
104             
105         }
106     </script>
107 </html>

效果好丑(没有加太多修饰):

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青玉伏案

iOS开发之多图片无缝滚动组件封装与使用

  经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播。没看...

24790
来自专栏python3

tkinter -- Event(2)

特 殊 键Cancel/Break/BackSpace/Tab/Return/Sift_L/Shift_R/Control_L/Control_R/Alt_L/...

8620
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native之React速学教程(上)

React Native之React速学教程(上) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

29280
来自专栏知道一点点

【原创】bootstrap框架的学习 第六课[bootstrap代码]

请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: &lt; 和 &gt;。

11830
来自专栏我分享我快乐

网站布局中的三种定位级

第1种定位级:块对象默认定位级 此定位级特点:块对象默认情况下跟据其出现顺序上下安排布局 下图中是用块对象默认定位级排列的一个大容器包着三个小容器: ? 第2种...

386140
来自专栏大数据钻研

DIV+CSS初学者需重视的10个简单问题与技巧

DIVCSS初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错...

28470
来自专栏一“技”之长

iOS文本布局探讨之一——文本布局框架TextKit浅析

        在iOS开发中,处理文本的视图控件主要有4中,UILabel,UITextField,UITextView和UIWebView。其中UILabe...

10810
来自专栏代码世界

HTML DOM Event 对象

17320
来自专栏前端知识分享

第65天:仿网易轮播图

14320
来自专栏菜鸟计划

vue组件详解(四)——使用slot分发内容

一、什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer><...

53840

扫码关注云+社区

领取腾讯云代金券