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 相关文章推荐
jQuery控制iFrame(实例代码)
Nov 19 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
jQuery取id有.的值的方法
May 21 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 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
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
js右键菜单效果代码
2007/07/21 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
大学生如何写自荐信
2014/01/08 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
php去除deprecated的实例方法
2021/11/17 PHP