JS实现的透明度渐变动画效果示例

本文实例讲述了射流研究…实现的透明度渐变动画效果。分享给大家供大家参考，具体如下：

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net JS透明度变化效果/title样式正文{ margin : 0pxpadding: 0px }。redb { width:200px高度： 200像素；背景：红色；filter:alpha(不透明度=30);opa city 3360 0.3 }/style/head body div class=' redb ' id=' opb TN '/div脚本窗口。onload=function(){ var OpDiv=document。getelementbyid(' op BTN ')；opdiv。onmouseover=function(){ startMove(100)；} Opdiv。onmouseout=function(){ startMove(30)；} } var timer=nullvar=30；定义变量速度=0;函数开始移动(opTarget){ clearInterval(计时器);var Opdiv=文档。GetElementByID(' op . BTN ')；timer=setInterval(function(){ if(AlphaOptarget){ speed=10；} else if(AlphaOptarget){ speed=-10；} if(alpha==Optarget){ ClearInterval(计时器);} else{ alpha=速度；opdiv。风格。不透明度=alpha/100；opDiv.style.filter='alpha(不透明度=' alpha ')'；} },100);}/脚本/正文/html运行效果：

小结：

1、过滤器和不透明区别：w3c标准透明度就是不透明度，过滤器只有工业管理学(工业工程)才能用，其他浏览器都支持奥帕市，改变透明度时候，不能通过类似获取的方法获取透明度值，因此需要单独创建变量3、不要忘记将定时器赋值给计时器

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript页面元素操作技巧总结》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。