javascript怎么实现不停淡入淡出

实现方法:1、使用querySelector()获取指定元素对象;2、使用“元素对象.style.opacity = Math.sin(2 * Math.PI * time)”语句来控制淡入或淡出效果;3、使用递归的方式实现不停淡入淡出

javascript怎么实现不停淡入淡出

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

javascript实现不停淡入淡出

只需要找到一个作用域为[0,1]的周期函数。将周期函数的值作为opacity的属性值即可控制淡入或淡出效果。

利用递归即可不停淡入淡出。

立即学习“Java免费学习笔记(深入)”;

实现代码:

床前明月光,疑是地上霜。

var duration = 3000;var startTime = new Date();var p = 0;requestAnimationFrame(function f(){ //获取到元素 var el = document.querySelector("#text"); var time = ( new Date - startTime ) / duration; el.style.opacity = Math.sin(2 * Math.PI * time); requestAnimationFrame(f);});

登录后复制

效果图:

1.gif

【推荐学习:javascript高级教程】

以上就是javascript怎么实现不停淡入淡出的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2707059.html

(0)
上一篇 2025年3月7日 20:08:38
下一篇 2025年2月24日 06:37:45

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • javascript怎么实现警告框

    在javascript中,可以利用Window对象的alert()方法来实现警告框,该方法的作用是弹出显示带有一条指定消息和一个“确定”按钮的警告框;语法“alert(message)”。 本教程操作环境:windows7系统、javasc…

    2025年3月7日
    200
  • javascript中如何定义变量

    javascript中,可以利用var、const或let关键字来定义变量,语法“关键字 变量名;”或“关键字 变量名=值;”。var定义的变量可以修改;const定义的变量不可以修改,且必须初始化;let可定义一个块级作用域的本地变量。 …

    2025年3月7日
    200
  • javascript怎么把指定值放入div中

    javascript把值放入div中的方法:1、利用innerTexts属性,语法“div对象.innerText=”指定值”;”;2、利用innerHTML属性,语法“div对象.innerHTML=”…

    2025年3月7日
    200
  • javascript怎么将数字转为字符

    转换方法:1、使用String()函数,语法“String(numbe)”,可把参数值转换为字符串;2、使用toString()方法,语法“number.toString()”;3、利用“+”运算符,语法“number + ””…

    2025年3月7日 编程技术
    200
  • javascript获取数组长度有什么方法

    在javascript中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。 本教程操作环境:windo…

    2025年3月7日
    200
  • Javascript怎么设置水印叠堆

    Javascript设置水印叠堆的方法:1、通过javascript创建页面元素p,并在p元素中创建文本节点,展示水印内容;2、设置p元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果即可。 本文操作环境:wi…

    2025年3月7日
    200
  • javascript中如何定义一个函数

    javascript中定义一个函数的方法:1、使用定义式,语法“function 函数名([参数列表]){函数体;}”;2、使用变量式,语法“var 函数名=function([参数列表]){函数体;}”。 本教程操作环境:windows7…

    2025年3月7日 编程技术
    200
  • javascript中reduce()方法是干什么的

    在javascript中,reduce()方法用于对数组元素进行迭代(累加),会对数组中的所有元素调用指定的回调函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 本教程操作环境:windows7系统、javascrip…

    2025年3月7日
    200
  • JavaScript如何创建随机整数

    JavaScript创建随机整数的方法:1、用“Math.random()”语句生成范围在“0~1”间的随机小数;2、将随机小数乘以一个整数值,将其扩大指定倍数;3、用“Math.floor()”语句将随机数向下取整,即可得到一个随机整数。…

    2025年3月7日
    200
  • javascript怎么对数组求和

    方法:1、用“a.forEach(function(value){sum+=value})”语句;2、用“a.reduce(function(pre,curr){sum=pre+curr})”;3、用“eval(a.join(“…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论