用js实现透明度渐变效果
2012-03-11 21:45
573 查看
如图,一开始元素的透明度是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;
}
最后,上代码
要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值。
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>
相关文章推荐
- 基于JS实现仿京东搜索栏随滑动透明度渐变效果
- js实现透明度渐变效果的方法
- 用js实现透明度渐变效果
- JS实现的透明度渐变动画效果示例
- js实现透明度渐变效果
- Android 图片合成:添加蒙板效果 不规则相框 透明度渐变效果的实现
- js实现图片从左往右渐变切换效果的方法
- 简单的代码实现上滑导航栏颜色和透明度渐变效果
- js实现类似光照的炫彩文字渐变视觉冲击效果
- 前端--js实现透明度动画效果
- JS实现颜色梯度与渐变效果完整实例
- JS实现的颜色实时渐变效果完整实例
- 自定义Scrollview--实现仿淘宝Toolbar透明度渐变效果
- Android基础-简单的动画实现 *补间动画 *透明度渐变 *旋转动画 *位移动画 *如果需要几个效果整合到一起,需要将所有效果全部放到set里
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- js实现同一个页面多个渐变效果的方法
- Toolbar随着ScrollView滑动透明度渐变效果实现
- Android的TitleBar实现透明度渐变效果
- jQuery实现鼠标响应式透明度渐变动画效果示例