js html 渐变透明度,JavaScript动画之透明度渐变

效果图

demo

margin: 0;

padding: 0;

}

#box{

width: 200px;

height: 200px;

margin: 0 auto;

background-color: #6cccf2;

opacity: 0.3;

}

window.οnlοad=function(){

var box = document.getElementById('box');

box.οnmοuseοver=function(){

startChange(100);

};

box.οnmοuseοut=function(){

startChange(30);

};

var timer = null;

function startChange(oTarget){

var speed = 0;

var box = document.getElementById('box');

var alpha = box.style.opacity*100;

if(alpha

speed=10;

}else if(alpha>oTarget){

speed= -10;

}

clearInterval(timer);

timer = setInterval(function(){

alpha = alpha + speed;

box.style.opacity = alpha/100;

if(alpha===oTarget){

clearInterval(timer);

}

},30);

}

js html 渐变透明度,JavaScript动画之透明度渐变相关推荐

View的透明度，设置view透明度setAlpha 及 Alpha透明度渐变动画
> android设置view透明度的效果的三种方式: 1.android:background="#ff6495ED"> 2.textView.setBackgro ...
js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
使用HTML5画布实现的超棒javascript动画仪表板：gauge.js
日期:2012-8-8 来源:GBin1.com 在线演示今天我们分享来自guage.js的超棒动画仪表板实现,这个类库使用html5画布来生成动态的自定义仪表板.不依赖于任何类库也不实用任何的C ...
ios基础考试题1，实现按钮点击改变位置和图片的透明度和动画的使用
ios基础考试题1,实现按钮点击改变位置和图片的透明度和动画的使用考察frame,center,bounds的坐标,改变,动画的使用,图片容器的UIImageView的透明度等知识 oc写法 // ...
Android控件入门-动画效果(透明度动画)
透明度动画(alpha): 第一种方式: xml: <Buttonandroid:id="@+id/btn_alpha"android:layout_width=" ...
html如何把图片填充颜色渐变,css图片怎么设置透明度渐变？
css可以在设置图片颜色时使用linear-gradient()函数设置渐变,其中渐变颜色使用rgba()设置即可设置图片透明度渐变. linear-gradient() 函数用于创建一个线性渐变的 ...
html js 动画效果,JavaScript 动画效果
使用JavaScript可以生成图像的动画效果. ----------------------- JavaScript 动画使用JavaScript可以生成图像的动画效果,技巧是使用JavaScri ...
使用HTML+CSS+JS模拟比赛晋级的动画功能
使用HTML+CSS+JS模拟比赛晋级的动画功能 1.需求描述 2.代码实现 3.效果演示系统:Win10 Chrome:106.0.5249.119 演示视频:[英雄联盟]S12全球总决赛冠军预测 ...
javaScript动画项目案例
javaScript动画项目案例示例代码:我的github demo效果演示示例:我的demo网站 1.动画库编写匀速运动案例一效果:匀速运动 <!DOCTYPE html> &l ...

js html 渐变透明度,JavaScript动画之透明度渐变

js html 渐变透明度,JavaScript动画之透明度渐变相关推荐

最新文章

热门文章