JavaScript淡入淡出渐变简单实例


Posted in Javascript onAugust 06, 2015

本文实例讲述了JavaScript淡入淡出渐变的实现方法。分享给大家供大家参考。具体如下:

这里介绍JavaScript淡入淡出的文字渐变例子,用js来控制div标签元素实现渐变显示,渐变隐藏,只要在那个标签里的内容,都可以淡入淡出,代码简单,便于修改完善,前端设计者必备的网页特效。

运行效果如下图所示:

JavaScript淡入淡出渐变简单实例

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js代码控制元素简单的淡入淡出效果</title>
<style>
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#777; background:#222}
a {color:#999; text-decoration:none}
a:hover {color:#bbb}
#wrapper {width:500px; margin:75px auto}
#buttons {height:35px}
.button {border:1px solid #eee; background:#ccc; border-radius:3px; -moz-border-radius:3px; padding:4px 0 5px; width:245px; text-align:center; cursor:pointer; float:left; color:#555}
.button:hover {border:1px solid #fff; background:#d9d9d9; color:#333}
.floatright {float:right}
#fade {opacity:0; filter:alpha(opacity='0') border-radius:3px; -moz-border-radius:3px; margin-bottom:10px; padding:9px 10px 0; height:26px; border:1px solid #548954; background:#355c33; color:#79af72; text-shadow:1px 1px #21341d}
</style>
<script type="text/javascript">
var fadeEffect=function(){
 return{
  init:function(id, flag, target){
   this.elem = document.getElementById(id);
   clearInterval(this.elem.si);
   this.target = target ? target : flag ? 100 : 0;
   this.flag = flag || -1;
   this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
   this.si = setInterval(function(){fadeEffect.tween()}, 20);
  },
  tween:function(){
   if(this.alpha == this.target){
    clearInterval(this.si);
   }else{
    var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
    this.elem.style.opacity = value / 100;
    this.elem.style.filter = 'alpha(opacity=' + value + ')';
    this.alpha = value
   }
  }
 }
}();
</script>
</head>
<body>
<div id="wrapper">
<div id="fade">JavaScript淡入淡出渐变例子</div>
<div id="buttons">
 <div class="button" onclick="fadeEffect.init('fade', 1)">Fade In</div>
 <div class="button floatright" onclick="fadeEffect.init('fade', 0)">Fade Out</div>
</div>
<p>For more information visit 样式版权所有.<br />
</p>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
js 函数性能比较方法
Aug 24 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 #Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 #Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 #Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 #Javascript
You might like
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
javascript表单验证大全
2015/08/12 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python监控文件并且发送告警邮件
2018/06/21 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Python中turtle库的使用实例
2019/09/09 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
单位委托书怎么写
2014/08/02 职场文书
表彰大会新闻稿
2015/07/17 职场文书
春季运动会加油词
2015/07/18 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
离婚协议书格式范本
2016/03/18 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python