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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
用jscript实现新建word文档
Jun 15 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
微信小程序实现签到功能
Oct 31 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
使用JavaScript通过前端发送电子邮件
May 22 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运算符的知识大全
2011/11/03 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php图像处理类实例
2015/07/28 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python random模块用法解析及简单示例
2017/12/18 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
就业自我评价
2014/02/04 职场文书
班班通校本培训方案
2014/03/12 职场文书
团购业务员岗位职责
2014/03/15 职场文书
升学宴演讲稿
2014/09/01 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
群众路线表态发言材料
2014/10/17 职场文书
后备干部推荐材料
2014/12/24 职场文书
办公用品质量保证书
2015/05/11 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
深入理解Pytorch微调torchvision模型
2021/11/11 Python