js实现透明度渐变效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了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中的对象化编程
Jan 16 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
js实现同一页面多个运动效果的方法
Apr 10 #Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 #Javascript
js实现缓冲运动效果的方法
Apr 10 #Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 #Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 #Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 #Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 #Javascript
You might like
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
用jscript启动sqlserver
2007/06/21 Javascript
DOM 基本方法
2009/07/18 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python random模块常用方法
2014/11/03 Python
python实现的系统实用log类实例
2015/06/30 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
生产车间主管岗位职责
2013/12/28 职场文书
英语感恩演讲稿
2014/01/14 职场文书
兴趣小组活动总结
2014/05/05 职场文书
给校长的建议书600字
2014/05/15 职场文书
优质服务口号
2014/06/11 职场文书
法人委托书范本
2014/09/15 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
为自己工作观后感
2015/06/11 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS