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 相关文章推荐
JS 自定义带默认值的函数
Jul 21 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
js实现金山打字通小游戏
Jul 24 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人民币金额数字转中文大写的函数代码
2013/02/27 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python中图像通道分离与合并实例
2020/01/17 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python输入中文的实例方法
2020/09/14 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
财务经理岗位职责
2015/01/31 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
实习报告范文
2019/07/30 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS