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中form与grid交互数据(record)的方法
Aug 29 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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通信之UDP通信实例
2015/07/02 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
理解JavaScript原型链
2016/10/25 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python list删除元素时要注意的坑点分享
2018/04/18 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Django REST framwork的权限验证实例
2020/04/02 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
DBA的职责都有哪些
2012/05/16 面试题
学院领导推荐信
2013/10/30 职场文书
大四本科生的自我评价
2013/12/30 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
vue引入Excel表格插件的方法
2021/04/28 Vue.js
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫