js实现透明度渐变效果的方法
更新时间:2015年04月10日 10:35:28 作者:jingangel
这篇文章主要介绍了js实现透明度渐变效果的方法,涉及javascript实现渐变效果的技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js实现透明度渐变效果的方法。分享给大家供大家参考。具体分析如下:
这里可实现一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止。鼠标移出,透明度慢慢减少,减少到30的效果。
要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值。
var alpha=30;
要点二:判断目标值和目前透明值,来判定是正向速度还是负向速度。
if(target > alpha){ speed = 2; }else{ speed = -2; }
要点三:如果透明值达到目标值,关掉定时器,否则透明值继续变化。最后把值赋给元素,因为透明度有兼容问题,所以要写上两个写法。
if(alpha == target){ clearInterval(timer); } else{ alpha = alpha + speed; run.style.filter = 'alpha(opacity='+alpha+')'; run.style.opacity = alpha/100; document.title = alpha; }
最后,上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <style> body{margin:0; padding:0;} #run{width:100px; height:100px; background:#06c; position:absolute; border:1px solid #000; opacity:0.3; filter:alpha(opacity=30);} </style> <script> window.onload = function(){ var run = document.getElementById("run"); var btn = document.getElementById("btn"); var speed = 1; var timer = null; var alpha=30; run.onmouseover = function(){ startrun(100); } run.onmouseout = function(){ startrun(30); } function startrun(target){ clearInterval(timer); timer = setInterval(function(){ if(target > alpha){ speed = 2; }else{ speed = -2; } if(alpha == target){ clearInterval(timer); } else{ alpha = alpha + speed; run.style.filter = 'alpha(opacity='+alpha+')'; run.style.opacity = alpha/100; document.title = alpha; } },30) } } </script> </head> <body> <div id="run"></div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
最新评论