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 相关文章推荐
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
分享5个好用的javascript文件上传插件
Sep 16 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
Discuz! Passport 通行证整合
2008/03/27 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python中变量交换的例子
2014/08/25 Python
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
五四演讲稿范文
2014/09/03 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
干部年终考核评语
2015/01/04 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
Java 异步任务计算FutureTask
2022/04/28 Java/Android