JS运动之多物体框架--多个div变宽

最新推荐文章于 2024-09-16 08:47:17 发布
最新推荐文章于 2024-09-16 08:47:17 发布
阅读量729 收藏 2
点赞数
分类专栏： javascipt 文章标签： javascript
如果只为div添加一个定时器的话，在多个div变宽的时候会发生问题，但是如果为每个div添加一个定时器，那么就可以实现多个物体变宽。注意：在多物体运动的情况下，所有东西不能共用。offset**会跟border冲突导致不能得到想要的结果，在这里可以用getStyle（）函数代替。
  1. function getStyle(obj, name)
  2. {
  3.         if(obj.currentStyle)
  4.         {
  5.                 return obj.currentStyle[name];
  6.         }
  7.         else
  8.         {
  9.                 return getComputedStyle(obj, false)[name];
  10.         }
  11. }
复制代码
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. div{
  8.         width:100px;
  9.         height:50px;
  10.         background:red;
  11.         margin:10px;
  12. }



  16. </style>


  19. <script>

  21. window.οnlοad=function (){
  22.         var aDiv=document.getElementsByTagName('div');
  23.         for(var i=0;i<aDiv.length;i++)
  24.         {        
  25.                 aDiv[i].timer=null;//自定义属性，加一个定时器
  26.                 aDiv[i].οnmοuseοver=function ()
  27.                 {
  28.                         startMove(this,400);
  29.                 };
  30.                 aDiv[i].οnmοuseοut=function ()
  31.                 {
  32.                         startMove(this,100);
  33.                 };
  34.         }
  35. };

  37. var timer=null;
  38. function startMove(obj, iTarget)
  39. {
  40.         clearInterval(obj.timer);
  41.         obj.timer=setInterval(function (){
  42.                 var speed=(iTarget-obj.offsetWidth)/6;
  43.                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
  44.                 
  45.                 if(obj.offsetWidth==iTarget)
  46.                 {
  47.                         clearInterval(obj.timer);
  48.                 }
  49.                 else
  50.                 {
  51.                         obj.style.width=obj.offsetWidth+speed+'px';
  52.                 }
  53.         }, 30);
  54. }



  58. </script>
  59. </head>
  60. <body  >
  61.      <div ></div>  
  62.      <div ></div>  
  63.      <div ></div>  

  65. </body>
  66. </html>
复制代码
效果图：


20140723102201281.jpg 
20140723102209564.jpg 


20140723101939593.jpg 




20140723101945343.jpg 
natalie86
关注
专栏目录
多个div变宽
回忆独殇的专栏
04-26 553
多个div变宽 div{ width:100px; height:50px; background:red; margin:10px; } window.onload=function() { var aDiv=document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++) { aDiv[i].tim
多个div 缓冲运动—变宽
yang295242361的博客
11-18 205
css: div{ width:100px; height:100px; background: yellowgreen; margin-top:20px; } html: div>div> div>div> div>div> js window.onload=function () { var oDiv=document.ge
原生js创建一个div层
热门推荐
果然朝辉的博客
04-01 1万+
原生js创建一个div层
（42）JS运动之多物体框架--多个div变宽
weixin_34349320的博客
04-20 89
  假设仅仅为div加入一个定时器的话。在多个div变宽的时候会发生故障。可是假设为每一个div加入一个定时器。那么就能够实现多个物体变宽。注意：在多物体运动的情况下，全部东西不能共用。offsetXXX会跟border冲突导致不能得到想要的结果。在这里能够用getStyle（）函数取代。 function getStyle(obj, name) { if(obj.currentS...
JavaScript之多物体运动框架
qq_44586361的博客
02-17 189
列子：多个div,变宽，变高 注：多物体运动框架中所有东西都不能公用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; div{width:200px;height:200px;background: yellow;margin:10px;float:left;bor...
42、JavaScript的运动----多个物体同时运动
Learning
06-23 576
1、多个物体同时运动             ---例子：多个Div，鼠标移入变宽   单定时器，存在问题   每个Div一个定时器 2、多物体运动框架 定时器作为物体的属性 参数的传递：物体、目标值     ---例子：多个Div淡入淡出    所有东西都不能公用    属性与运动对象绑定：速度、其他属性值（如透明度等）
Javascript运动概念2——多物体运动框架
zxy9602的博客
11-16 360
1、多个物体同时运动 例子：多个div，鼠标移入变宽 （1）单定时器，存在问题 （2）每个div一个定时器 2、多物体运动运动框架 （1）多物体运动框架 a、定时器作为物体的属性 b、参数的传递：物体、目标值 c、例子：多个div淡入淡出 所有东西都不能共用 属性与运动对象绑定：速度、其他属性值（如透明度等） （2）任意值运动框架 a、offset属性的bug
【JavaScript】原生js实现多个元素运动、一套运动框架改变任意样式
Owen的博客
01-15 306
多个元素运动 注意：多个元素，定时器需要多个。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {width: 50px;height: 50px;back
js运动应用：多物体运动框架（上）
慵懒的猫
10-29 319
多物体运动框架原理： 1、所有属性不可公用 2、属性与运动对象绑定：速度，透明度等其他属性值 案例一：多个div变宽： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;
JavaScript实现多个物体同时运动
10-15
例如，当页面上有多个div元素时，如果鼠标悬停在一个div上希望div变宽，如果用同一个定时器控制所有div，则无法实现多个div同时响应鼠标的动作并进行独立的宽度变化。 2. **每个物体拥有自己的定时器**：为了解决...
09-JS运动应用.pptx
07-06
通过将定时器作为物体的属性，并传递物体和目标值作为参数，可以实现多个Div的同步运动，例如淡入淡出效果。这种方法提高了代码复用性，减少了内存消耗。 接下来，教程提到了offset属性的一个Bug，特别是在有边框的...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 895
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 642
【代码】【JavaScript】LeetCode：707设计链表。
使用 uni-app 开发微信小程序的详细指南
最新发布
2301_79685859的博客
09-16 691
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 550
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 308
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 291
js中严格区分大小写。
JavaScript运动框架与多物体动画
"09-JS运动应用.pptx - 一份关于JavaScript运动应用的课程教学材料，涵盖了多物体运动框架、动画实现以及常见问题解决等内容。" 在JavaScript中，运动应用是实现动态效果的关键，特别是在网页交互设计中。这份JS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值