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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
数学系个人求职信范文
2014/01/30 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
商场促销活动策划方案
2014/08/18 职场文书
孝女彩金观后感
2015/06/10 职场文书
常住证明范本
2015/06/23 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电