脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js透明度渐变效果

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • javaScript 删除确认实现方法小结

    javaScript 删除确认实现方法小结

    因为对于内容的删除是件很重要的事，所以一般的系统中，都需要删除确认一下，以免误删，具体的方法如下，大家可以参考下。
    2009-12-12
  • 详解组件库的webpack构建速度优化

    详解组件库的webpack构建速度优化

    这篇文章主要介绍了详解组件库的webpack构建速度优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 基于BootStrap的图片轮播效果展示实例代码

    基于BootStrap的图片轮播效果展示实例代码

    这篇文章主要介绍了基于BootStrap的图片轮播效果展示实例代码的相关资料,需要的朋友可以参考下
    2016-05-05
  • js封装成插件_Canvas统计图插件编写实例

    js封装成插件_Canvas统计图插件编写实例

    下面小编就为大家带来一篇js封装成插件_Canvas统计图插件编写实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 有趣的JavaScript隐式类型转换操作实例分析

    有趣的JavaScript隐式类型转换操作实例分析

    这篇文章主要介绍了JavaScript隐式类型转换操作,结合实例形式分析了JavaScript隐式类型转换操作相关实现技巧与注意事项,需要的朋友可以参考下
    2020-05-05
  • JS+CSS实现的竖向简洁折叠菜单效果代码

    JS+CSS实现的竖向简洁折叠菜单效果代码

    这篇文章主要介绍了JS+CSS实现的竖向简洁折叠菜单效果代码,涉及JavaScript链式操作与元素遍历等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 屏蔽相应键盘按钮操作

    屏蔽相应键盘按钮操作

    本篇文章主要是对屏蔽相应键盘按钮的操作代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • Javascript&DHTML基础知识

    Javascript&DHTML基础知识

    首先请下载JScript.chm这本手册，无论新手老手，有一本手册是免不了的，特别是对于新手，如果你没有空翻犀牛书，那么这本手册将是你了解这门语言的首选。下面所讲的大多数，手册上可以没有提及，或提及很少的内容。
    2008-07-07
  • Javascript基于AJAX回调函数传递参数实例分析

    Javascript基于AJAX回调函数传递参数实例分析

    这篇文章主要介绍了Javascript基于AJAX回调函数传递参数的方法,结合实例形式较为详细的分析了JavaScript使用ajax传递参数的相关技巧以及回调函数的实现技巧,需要的朋友可以参考下
    2015-12-12
  • Bootstrap 粘页脚效果

    Bootstrap 粘页脚效果

    Bootstrap 粘页脚，说得具体一点就是“将固定高度的页脚紧贴页面底部”，本文给大家分享具有实现代码，感兴趣的朋友参考下吧
    2016-03-03

最新评论