html 透明度渐变效果,JS实现的透明度渐变动画效果示例

Myth丶恋晨 2022-10-06 10:55 235阅读 0赞

本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下：

www.jb51.net JS透明度变化效果

body\{

margin: 0px;

padding: 0px;

\}

.redb\{

width:200px;

height: 200px;

background: red;

filter:alpha(opacity=30);

opacity: 0.3;

\}

window.onload = function()\{

var opDiv = document.getElementById("opbtn");

opDiv.onmouseover = function()\{

startMove(100);

\}

opDiv.onmouseout = function()\{

startMove(30);

\}

\}

var timer = null;

var alpha = 30;

var speed = 0;

function startMove(opTarget)\{

clearInterval(timer);

var opDiv = document.getElementById("opbtn");

timer = setInterval(function()\{

if(alpha

speed = 10;

\}

else if(alpha>opTarget)\{

speed = -10;

\}

if(alpha==opTarget)\{

clearInterval(timer);

\}

else\{

alpha += speed;

opDiv.style.opacity = alpha/100;

opDiv.style.filter = 'alpha(opacity='+alpha+')';

\}

\},100);

\}

运行效果：

![9fadffb8c07cc917c125048de8dcfbb2.gif][]

小结:

1、filter和opacity区别：w3c标准透明度就是opacity,filter只有IE才能用,其他浏览器都支持opacity

2、改变透明度时候，不能通过类似offsetLeft的方法获取透明度值，因此需要单独创建变量

3、不要忘记将定时器赋值给timer

希望本文所述对大家JavaScript程序设计有所帮助。

[9fadffb8c07cc917c125048de8dcfbb2.gif]: /images/20221005/5e15ef69f5bd49c28bd53fc51a625bba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt动画：透明度渐变——用QPropertyAnimation实现透明度效果

Qt动画：透明度渐变——用QPropertyAnimation实现透明度效果在Qt中，通过QPropertyAnimation可以很方便地实现控件的动画效果。透明度渐变是一

一时失言乱红尘/ 2023年10月14日 20:08/ 0 赞/ 14 阅读

相关 ECharts color属性设置（不透明度，透明度，线性渐变，径向渐变，扇形渐变，纹理填充）

1 不透明度 1.1 颜色英文名示例： color:'red' 1.2 十六进制格式有两种表示方式。第一种为\+6位十六进制数，前2位表示

拼搏现实的明天。/ 2023年10月05日 11:04/ 0 赞/ 75 阅读

相关 php图片特效,php 图片上添加透明度渐变的效果

$strimgsrc = file\_get\_contents("http://127.0.0.1/5307754.jpg"); $imgsrc = imagecreate

﹏ヽ暗。殇╰゛Y/ 2022年11月12日 10:57/ 0 赞/ 167 阅读

相关 php改变图像透明度,在图片上添加透明度渐变的效果_php

$strimgsrc = file\_get\_contents("http://127.0.0.1/5307754.jpg"); $imgsrc = imagecreate

快来打我*/ 2022年10月21日 04:54/ 0 赞/ 165 阅读

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

效果图 ![AAffA0nNPuCLAAAAAElFTkSuQmCC][] ![AAffA0nNPuCLAAAAAElFTkSuQmCC][] demo \\{ ma

淡淡的烟草味﹌/ 2022年10月07日 05:45/ 0 赞/ 242 阅读

相关 html 透明度渐变效果,JS实现的透明度渐变动画效果示例

本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下： www.jb51.net JS透明度变化效果 body\{ margin: 0px; pa

Myth丶恋晨/ 2022年10月06日 10:55/ 0 赞/ 236 阅读

相关 html字体的渐变效果,神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下下面是 CSS 部分代码： body\{ font:12px/1.5 Micro

约定不等于承诺〃/ 2022年10月06日 00:57/ 0 赞/ 392 阅读

相关 css3透明度渐变

在需要使用透明度渐变的div中添加 linear类即可 <div class="linear" style="widht:500px;height:500px"></

小咪咪/ 2022年09月15日 12:57/ 0 赞/ 253 阅读

相关 ActionBar随ScorllView上下拖动而透明度渐变效果

[http://blog.csdn.net/huweigoodboy/article/details/43384607][http_blog.csdn.net_huweigoo

叁歲伎倆/ 2022年08月17日 14:17/ 0 赞/ 147 阅读

相关 Android 安卓动画属性动画 - 渐变/透明度动画

目录引入动画 - 相关文章篇布局文件篇代码逻辑篇 -------------------- 引入属性动画的出现，弥补了补间动画的不足之处，补

傷城~/ 2022年05月14日 04:28/ 0 赞/ 340 阅读