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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
详解node中创建服务进程
May 09 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
ES6 十大特性简介
Dec 09 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python制作爬虫抓取美女图
2016/01/20 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
农民致富事迹材料
2014/01/23 职场文书
求职意向书
2014/04/01 职场文书
个人委托书格式
2014/04/04 职场文书
社团活动总结怎么写
2014/06/30 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
新教师教学工作总结
2015/08/12 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS