用js实现同一页面多个不同运动效果2

最新推荐文章于 2022-11-21 14:42:07 发布
最新推荐文章于 2022-11-21 14:42:07 发布
阅读量472 收藏
点赞数 1
分类专栏： 前端Javascript相关操作说明 文章标签： javascript js定时器 对象 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gujinapenggu5/article/details/50374447
版权

要点一：

function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

从样式表中根据id和属性名取值。

要点二：

if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}

 

如果设置的是透明度的值，因为有可能会是小数点，所以需要用parseFloat，然后有可能会有小数，用round方法四舍五入取整。

如果设置的非透明度值，用parseInt，可以只取数值部分



<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c; list-style:none; margin:10px; border:1px solid #000; filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
  var runs = document.getElementById("runs");
  var runs_li = runs.getElementsByTagName("li");
    runs_li[0].onmouseover = function(){
      startrun(this,"width",300);
    }
    runs_li[0].onmouseout = function(){
      startrun(this,"width",80);
    }
    runs_li[1].onmouseover = function(){
      startrun(this,"height",300);
    }
    runs_li[1].onmouseout = function(){
      startrun(this,"height",80);
    }
    runs_li[2].onmouseover = function(){
      startrun(this,"fontSize",50);
    }
    runs_li[2].onmouseout = function(){
      startrun(this,"fontSize",14);
    }
    runs_li[3].onmouseover = function(){
      startrun(this,"opacity",100);
    }
    runs_li[3].onmouseout = function(){
      startrun(this,"opacity",30);
    }
}


function startrun(obj,attr,target){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
  var cur = 0;
  if(attr == "opacity"){
    cur = Math.round(parseFloat(getstyle(obj,attr))*100);
  }else{
    cur = parseInt(getstyle(obj,attr));
  }
  var speed = (target - cur)/8;
  speed = speed>0?Math.ceil(speed):Math.floor(speed);
    
    if(cur == target){
      clearInterval(obj.timer);
    }else{
      if(attr == "opacity"){
        obj.style.filter='alpha(opacity='+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr] = cur+speed+"px";
      }
    }
    
  },30);
}


function getstyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }else{
    return getComputedStyle(obj,false)[name];
  }
}
</script>
</head>


<body>


<ul id="runs">
  <li style="top:0">1</li>
  <li style="top:90px;">2</li>
  <li style="top:180px;">3</li>
  <li style="top:270px;">4</li>
</ul>
</body>
</html>
午夜玫瑰钻
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js - 使用setInterval和requestAnimationFrame实现动画效果
ithanmang
06-23 4078
如果想要在场景中实现动画效果，需要使场景以一定的时间间隔进行渲染。 让页面按照一定的间隔进行刷新的方法有两种，分别是： 在H5 和 jsAPI接口之前使用的方法是 setInterval 方法 setInterval 作用：在播放动画时，按照一定的时间间隔就调用传入的方法或对象。 格式如下： setInterval( function,interval[arg1,...argn] )或...
用js实现同一页面多个不同运动效果
午夜灬玫瑰焰钻的博客
12-21 513
要点一 //查询某个对象的某个属性值 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } 要点二 //在此操作想要获取对象的属性 var divs
JS实现多小球运动中的问题
weixin_46671666的博客
03-19 595
首先，附上最终效果图，如下： 本效果的实现主要由产生随机数而产生不同颜色以及不同大小的球，然后球在X，Y方向上赋上不同的速度。球存放在数组中，因而可以实现每个球的大小以及不同方向上的速度不一样。 然后，说一下编程过程中遇到的一些问题： 1.产生了多个球，但是只有一个球动： 经检查发现原因是： for(var i=0;i<100;i++){ arrball=createball();//创建小球 setInterval(move,INTERVAL);//调用小球运动函数 } //小
使用原生js实现点击按钮展示不同状态内容
m0_46577631的博客
11-21 601
使用原生js实现点击按钮展示不同状态内容
js实现同一页面多个不同运动效果的方法
10-24
本文主要探讨了如何在同一页面中实现多个不同的运动效果，并通过实例详细讲解了实现这一目标所需的关键知识点。 首先，文章介绍了如何编写一个获取元素样式值的函数getstyle(obj,name)，这个函数是实现多种运动效果...
js实现同一页面多个运动效果的方法
10-24
首先，实现同一页面多个运动效果的核心在于正确处理每一个元素的运动过程，并确保它们之间的运动互不影响。这通常通过为每个元素设置独立的定时器（`setInterval`）来实现，以避免元素之间运动状态的相互干扰。 ...
Javascript动画效果（3）
10-21
总的来说，JavaScript动画效果的实现涉及对DOM元素的属性进行定时修改，通过递归或回调函数来控制动画的顺序，以及通过数组和循环来实现多个动画的同时运行。理解这些概念对于构建动态和交互性强的Web页面至关重要。...
js实现烟花特效
11-21
《使用JavaScript实现烟花特效的详解》 在网页设计中，动态效果往往能为用户体验增色不少，其中烟花特效就是一种常见的、吸引用户注意力的方式。本文将详细介绍如何利用JavaScript实现一个鼠标点击后出现的烟花爆炸...
HTML中jquery控制button按钮可点击、不可点击
热门推荐
西门吹吹吹雪
08-18 9万+
HTML中jquery控制button按钮可点击、不可点击 1.首先来说button按钮不可点击 1.1第一种（html代码中控制） 按钮不可点击 1.2第二种（jquery控制） $("#button_id").attr('disabled',true); 2.按钮可点击 2.1第一种（html代码中控制，默认） 按钮不可点击 2.2第二种（jquery控
一. button按钮防止重复点击（5秒内设置点击一次）
shitou的博客
07-12 1万+
在用户使用 Android 应用的时候，经常会出现过快且多次点击同一按钮的情况，一方面这是因为应用或手机当前有些卡顿，另一方面也可能是由于很多应用并没有设置按钮点击时的 selector 或者其它按钮响应方式(例如点击按钮时按钮放大，常见于游戏)，导致用户误认为没有点击到当前按钮，当然，除了相对应的对应用进行优化和设置点击selector以外，我们还可以做一些其它的工作，例如，判断按钮的 onCl...
自定义getStyle方法获取元素样式
TomHe789
04-10 362
兼容性 兼容性如下图所示（摘自 mdn） 解决方法 由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上，而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式，所以我们就可以自定义一个getStyle方法来解决兼容性的问题 代码 自定义getStyle()代码 function getStyle (obj, name) { if (obj.cur...
js实现多个小球碰撞
desjs7499的博客
04-23 569
实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹 实现代码： ...
JS原生实现多个小球跟着鼠标移动
while(true){alert(
07-16 2903
每个小球移动都有自己的坐标，小球移动的同时，需要进行坐标传递，将第一个坐标依次传递给最后一个坐标，来实现小球跟着移动的效果   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;小球运动&lt;/title&gt; &lt;style
javascript function getStyle()样式取值兼容方法
骑着猪猪去拍拖
06-08 1845
function getStyle(obj,styleName){ if(obj.currentStyle){ return obj.currentStyle[styleName]; }else{ return getComputedStyle(obj,null)[styleName]; } } 使用：parseInt(getSty
JS实现同页面，点击切换效果
groundhbx的博客
03-19 1万+
效果：同一页面，点击切换显示图片。代码实现：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;demo&lt;/title&gt; &lt;meta charset="UTF-8" /&gt; &lt;script type="text/javascript" src="show
关于通过JS移动脱标盒子left或top值时遇到设置的值与展示效果不一样的问题
weixin_43762209的博客
10-11 445
最近自己写些案例时遇到了这样的问题： //先写一个简单的布局和样式(省略了html,head,body标签) //布局：在一个父盒子中嵌入一个子盒子 <div id="parent"> <div id="child"></div> </div> //样式 <style type="text/css"> </style>...
html 多层展开,jquery实现同一页面多个DIV层展开收缩功能
最新发布
06-09
可以使用jQuery的`slideToggle()`方法来实现同一页面多个DIV层的展开收缩功能。具体步骤如下： 1. 给需要展开收缩的DIV层添加一个class类，比如"expandable"。 2. 在jQuery中使用`$(".expandable")`来选择所有的需要展开收缩的DIV层。 3. 使用`click()`方法来监听DIV层的点击事件。 4. 在点击事件中使用`slideToggle()`方法来展开或收缩DIV层。 示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>HTML多层展开，jQuery实现同一页面多个DIV层展开收缩功能</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> .expandable { background-color: #f0f0f0; padding: 10px; margin-bottom: 10px; cursor: pointer; } .expandable-content { display: none; } </style> </head> <body> <div class="expandable"> <h3>第一层</h3> <div class="expandable-content"> <p>第一层内容</p> </div> </div> <div class="expandable"> <h3>第二层</h3> <div class="expandable-content"> <p>第二层内容</p> </div> </div> <div class="expandable"> <h3>第三层</h3> <div class="expandable-content"> <p>第三层内容</p> </div> </div> <script type="text/javascript"> $(document).ready(function() { $(".expandable").click(function() { $(this).find(".expandable-content").slideToggle(); }); }); </script> </body> </html> ``` 在上述代码中，我们使用了一个`.expandable`的class来选择需要展开收缩的DIV层，并且在点击事件中使用了`slideToggle()`方法来展开或收缩DIV层。同时，我们也添加了一些CSS样式来美化界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值