渐变

原创 2012年03月23日 13:30:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <center> <input type="button" name="fx" value="宽度渐变" id="wt-cg"/> <input type="button" name="fx" value="高度渐变" id="hi-cg"/> <input type="button" name="fx" value="透明度渐变" id="op-cg"/> <input type="button" name="fx" value="边框渐变" id="bd-cg"/> <input type="button" name="fx" value="综合渐变" id="zh-cg"/> <div id="demo" style="width:370px;height:100px;background-color:#00CC33;border:2px solid #990033; font-size:12px;"></div> </center> <script> function Animate(el, prop, opts) { this.el = el; this.prop = prop; this.from = opts.from; this.to = opts.to; this.time = opts.time; this.callback = opts.callback; this.animDiff = this.to - this.from; } Animate.prototype._setStyle = function(val) { switch(this.prop) { case 'opacity': this.el.style[this.prop] = val; this.el.style.filter = 'alpha(opacity=' + val * 100 + ')'; break; default: this.el.style[this.prop] = val + 'px'; break; } } Animate.prototype._animate = function() { var that = this; this.now = new Date(); this.diff = this.now - this.startTime; if (this.diff > this.time) { this._setStyle(this.to); if (this.callback) { this.callback.call(this); } clearInterval(this.timer); return; } this.percentage = (Math.floor((this.diff / this.time) * 100) / 100); this.val = (this.animDiff * this.percentage) + this.from; this._setStyle(this.val); } Animate.prototype.start = function() { var that = this; this.startTime = new Date(); clearInterval(this.timer); this.timer = setInterval(function() { that._animate.call(that); }, 4); } Animate.canTransition = function() { var el = document.createElement('foo'); el.style.cssText = '-webkit-transition: all .5s linear;'; return !!el.style.webkitTransitionProperty; }(); window.onload = function() { var T$ = function(id) { return document.getElementById(id); } var T$$ = function(n) { return document.getElementsByName(n); } var demo = T$('demo'); var btns = T$$('fx'); function disableButton() { for (var i = 0, len = btns.length; i < len; ++i) { btns[i].disabled = 'disabled'; } } function resetButton() { for (var i = 0, len = btns.length; i < len; ++i) { btns[i].disabled = ''; } } // 宽度渐变 function changeWidth() { var fx = 'width', from = demo.clientWidth, to = from - 270, time = 1000; var callback = function() { from = demo.clientWidth; to = from + 270; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton }).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } // 高度渐变 function changeHeight() { var fx = 'height', from = demo.clientHeight, to = from + 100, time = 1000; var callback = function() { from = demo.clientHeight; to = from - 100; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } // 透明度渐变 function changeOpacity() { var fx = 'opacity', from = 1, to = 0, time = 1000; var callback = function() { from = 0; to = 1; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } // 边框渐变 function changeBorderWidth() { var fx = 'borderWidth', from = 2, to = 10, time = 1000; var callback = function() { from = 10; to = 2; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton }).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } T$('wt-cg').onclick = function() { disableButton(); changeWidth(); } T$('hi-cg').onclick = function() { disableButton(); changeHeight(); } T$('op-cg').onclick = function() { disableButton(); changeOpacity(); } T$('bd-cg').onclick = function() { disableButton(); changeBorderWidth(); } T$('zh-cg').onclick = function() { disableButton(); changeWidth(); changeHeight(); changeOpacity(); } //if (Animate.canTransition) { //demo.style.webkitTransition = 'opacity 3s ease-in'; //demo.style.opacity = 0; //} else { //} } </script> </body> </html>

android中使用shader实现渐变效果

android中可以使用多种shader对图像进行渲染,常见有下: BitmapShader位图 LinearGradient线性 RadialGradient光束 Sweep...
  • panyaorui
  • panyaorui
  • 2012年05月04日 10:03
  • 3160

用js写一个图片渐变切换效果

进度条 *{margin:0;padding:0;} #ulmian{ position:relative; width:100%; overflow:hidden; } #ulmi...
  • u013247277
  • u013247277
  • 2017年04月26日 17:39
  • 1129

opacity渐变功能

function timeshow1(){ $("#popup").animate({opacity: '0'},1000); //$("#popup").animate({opacity: ...
  • wantingtingting
  • wantingtingting
  • 2014年11月19日 16:14
  • 374

浅谈使用CSS遮罩与CSS线性渐变实现图片的斜线拼接

css mask的原理:只会把遮罩图里透明像素所对应的原图部分进行隐藏。 #mask { position: absolute; left: 0; top: 0; wi...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年01月14日 11:20
  • 562

标题栏渐变的效果实现

最近做APP非要加一个功能就是标题栏随着滑动变色,研究一天终于搞出来,废话少说,直接来干活。我们都知道滑动变色我们必须用到手势的监听,无奈最外层是ScrollView还要加监听,所以呢自己自定义一个S...
  • u010786471
  • u010786471
  • 2016年03月16日 18:17
  • 623

CSS中的渐变效果

1.渐变的含义与组成 含义:两种或多种颜色之间平滑过渡的效果 组成:由色标来组成 色标: 1、颜色 2、颜色出现的位置 2.渐变的属性和取值 1、属性       ...
  • baidu_25343343
  • baidu_25343343
  • 2016年10月08日 01:52
  • 1425

Java图像渐变

图像渐变我们大体想一下思路无非是这样:将图像所有的像素点的RBG,每个点就减去相同的量,而且这个量是个渐变的量。是的,就是这样,我们的程序也是这个思路,不过就是没有单纯的“想”这么简单了。我这里只编写...
  • SJF0115
  • SJF0115
  • 2012年05月06日 19:39
  • 2444

shape里面的gradient属性,就是渐变属性

转载drawable中的shape,看文档过程中gradient属性不是很理解。本着站在巨人肩膀上学习的态度,上网找资料。估计打开方式不对,找到资料甚少,只能自己动手,当做笔记,有错请指正,谢谢~ ...
  • liuwei6551234
  • liuwei6551234
  • 2016年09月21日 20:26
  • 1104

Android使用Shape进行渐变设置

设置android背景渐变色:shape是定义形状;gradient是在形状里填充渐变色;gradient相关的属性(startColor:起始颜色     endColor:结束颜色    angl...
  • wozaifeiyang0
  • wozaifeiyang0
  • 2012年06月25日 14:47
  • 3756

SVG图案和渐变填充

在基本图形绘制中,我们只用了纯色为图形对象填充颜色和绘制轮廓。其实,出来纯色以外,我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。 一、图案填充: 我们首先来看图案填充,要使用图案,首先要定义一个...
  • Selina_Chan
  • Selina_Chan
  • 2016年06月14日 10:14
  • 1670
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:渐变
举报原因:
原因补充:

(最多只允许输入30个字)