js实现透明度渐变效果

最新推荐文章于 2024-05-15 16:27:27 发布
最新推荐文章于 2024-05-15 16:27:27 发布
阅读量2.7k 收藏 3
点赞数 2
分类专栏： 前端js

如果有可能建议使用css3实现类似功能，具体可以参阅css实现透明度渐变效果一章节。

下面分享一个使用js实现的此功能，兼容性更好一些，代码实例如下:

     
     

      
      

       
       

        
        
 
            

              01 
            
 
            

              02 
            
 
            

              03 
            
 
            

              04 
            
 
            

              05 
            
 
            

              06 
            
 
            

              07 
            
 
            

              08 
            
 
            

              09 
            
 
            

              10 
            
 
            

              11 
            
 
            

              12 
            
 
            

              13 
            
 
            

              14 
            
 
            

              15 
            
 
            

              16 
            
 
            

              17 
            
 
            

              18 
            
 
            

              19 
            
 
            

              20 
            
 
            

              21 
            
 
            

              22 
            
 
            

              23 
            
 
            

              24 
            
 
            

              25 
            
 
            

              26 
            
 
            

              27 
            
 
            

              28 
            
 
            

              29 
            
 
            

              30 
            
 
            

              31 
            
 
            

              32 
            
 
            

              33 
            
 
            

              34 
            
 
            

              35 
            
 
            

              36 
            
 
            

              37 
            
 
            

              38 
            
 
            

              39 
            
 
            

              40 
            
 
            

              41 
            
 
            

              42 
            
 
            

              43 
            
 
            

              44 
            
 
            

              45 
            
 
            

              46 
            
 
            

              47 
            
 
            

              48 
            
 
            

              49 
            
 
            

              50 
            
 
            

              51 
            
 
            

              52 
            
 
            

              53 
            
 
            

              54 
            
 
            

              55 
            
 
            

              56 
            
 
            

              57 
            
 
            

              58 
            
 
            
 
             
 
              <!doctype html> 
             
 
             
 
              < 
              html 
              > 
             
 
             
 
              < 
              head 
              > 
             
 
             
 
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
             
 
             
 
              < 
              title 
              >js实现透明度渐变效果</ 
              title 
              > 
             
 
             
 
              < 
              style  
              type 
              = 
              "text/css" 
              > 
             
 
             
 
              div { 
             
 
             
 
                 
              width: 150px; 
             
 
             
 
                 
              height: 150px; 
             
 
             
 
                 
              background-color: #8B0000; 
             
 
             
 
                 
              float: left; 
             
 
             
 
                 
              margin: 10px; 
             
 
             
 
                 
              border: 3px solid #599; 
             
 
             
 
                 
              filter: alpha(opacity: 30); 
             
 
             
 
                 
              opacity: 0.3; 
             
 
             
 
              } 
             
 
             
 
              </ 
              style 
              > 
             
 
             
 
              < 
              script 
              > 
             
 
             
 
              window.onload = function() { 
             
 
             
 
                 
              var aDiv = document.getElementsByTagName("div"); 
             
 
             
 
                 
              for (var index = 0; index < aDiv.length; index++) { 
             
 
             
 
                   
              aDiv[index].timer = null; 
             
 
             
 
                   
              aDiv[index].alpha = 30; 
             
 
             
 
                   
              aDiv[index].onmouseover = function () { 
             
 
             
 
                     
              startMove(this, 100); 
             
 
             
 
                   
              } 
             
 
             
 
                   
              aDiv[index].onmouseout = function () { 
             
 
             
 
                     
              startMove(this, 30); 
             
 
             
 
                   
              } 
             
 
             
 
                 
              } 
             
 
             
 
              } 
             
 
             
 
                 
             
 
             
 
              function startMove(obj, iTarget) { 
             
 
             
 
                 
             
 
             
 
                 
              clearInterval(obj.timer); 
             
 
             
 
                 
             
 
             
 
                 
              obj.timer = setInterval(function() { 
             
 
             
 
                   
              var speed = (iTarget - obj.alpha) / 10; 
             
 
             
 
                   
              speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
             
 
             
 
                   
              if (obj.alpha == iTarget) { 
             
 
             
 
                     
              clearInterval(obj.timer); 
             
 
             
 
                   
              } else { 
             
 
             
 
                     
              obj.alpha += speed; 
             
 
             
 
                     
              obj.style.filter = "alpha(opacity:" + obj.alpha + ")"; 
             
 
             
 
                     
              obj.style.opacity = obj.alpha / 100; 
             
 
             
 
                   
              } 
             
 
             
 
                 
              }, 30); 
             
 
             
 
              } 
             
 
             
 
              </ 
              script 
              > 
             
 
             
 
              </ 
              head 
              > 
             
 
             
 
              < 
              body 
              > 
             
 
             
 
                 
              < 
              div 
              ></ 
              div 
              > 
             
 
             
 
                 
              < 
              div 
              ></ 
              div 
              > 
             
 
             
 
                 
              < 
              div 
              ></ 
              div 
              > 
             
 
             
 
                 
              < 
              div 
              ></ 
              div 
              > 
             
 
             
 
              </ 
              body 
              > 
             
 
             
 
              </ 
              html 
              >

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

（1）.window.onload = function() {}，当文档结构加载完毕再去执行函数中的代码。

（2）.var aDiv = document.getElementsByTagName("div")，获取div元素集合。

（3）.for (var index = 0; index < aDiv.length; index++) {}，遍历集合中的每一个div元素。

（4）.aDiv[index].timer = null，为当前对象添加一个自定义属性timer并赋值为null，用来作为定时器函数的标识。

（5）.aDiv[index].alpha = 30，为当前对象添加一个自定义属性alpha 并赋值为30（值是经过处理的），默认透明度。

（6）.aDiv[index].onmouseover = function () {

  startMove(this, 100);

}，为当前元素注册onmouseover事件处理函数。

鼠标悬浮的时候，目标透明度为100，也就是不透明。

（7）.aDiv[index].onmouseout = function () {

  startMove(this, 30);

}，鼠标离开，透明度设置为30。

（8）.function startMove(obj, iTarget) ，第一个参数是元素对象，第二个参数是目标透明度。

（9）.clearInterval(obj.timer)，停止上一个定时器函数的执行，防止反复移入移出导致定时器叠加的问题。

（10）.obj.timer = setInterval(function() {},30)，每隔30毫秒执行一次回调函数。

（11）.var speed = (iTarget - obj.alpha) / 10，透明度变化幅度。

（12）.speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)，将速度转换为整数。

（13）. if (obj.alpha == iTarget) {

  clearInterval(obj.timer);

}，如果达到目标透明度值，那么就停止定时器函数的执行。

（14）.else {

  obj.alpha += speed;

obj.style.filter = "alpha(opacity:" + obj.alpha + ")";

  obj.style.opacity = obj.alpha / 100;

}，设置当前元素透明度，采用了兼容性写法。

Return_KB
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现透明度渐变效果的方法
10-24
主要介绍了js实现透明度渐变效果的方法,涉及javascript实现渐变效果的技巧,非常具有实用价值,需要的朋友可以参考下
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
10-22
主要介绍了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果,涉及JavaScript弹出窗口的实现及页面元素属性动态变换的相关技巧,需要的朋友可以参考下
JS实现透明度渐变动画
weixin_30387423的博客
05-15 139
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现透明度渐变动画</title> <style type="text/css"> *{margin:0;padding:0;} #b...
【css渐变 修改透明度方法】
最新发布
m0_57426442的博客
05-15 826
background: linear-gradient(to right，颜色1, 颜色2);- - - 这种是从左到右，有颜色1过渡为颜色2；background: linear-gradient(颜色1, 颜色2);- - - 这种是从上到下，有颜色1过渡为颜色2；预定义方向（to bottom、to top、to right、to left、to bottom right，等等）透明度值 0~1 之间，0指完全透明，1指完全不透明，
js函数封装，使一个obj的透明度渐变，淡入淡出（兼容IE）
追随大神的脚步
05-12 2834
无标题文档 *{padding:0; margin:0;} li{ list-style:none;} #main{ width:580px; height:400px; margin:0 auto; margin-top:200px; border:1px solid #000; padding:10px; position:relative;} #main ul{} #main u
div逐渐透明化
娓娓道来
08-05 3782
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; bac...
JS实现的透明度渐变动画效果示例
10-18
主要介绍了JS实现的透明度渐变动画效果,涉及javascript响应鼠标事件针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
基于JS实现仿京东搜索栏随滑动透明度渐变效果
10-19
在提供的代码片段中，`<header>`元素包含了一个类为`module-layer`的容器，它包含了一个用于控制透明度渐变的背景层`<div class="search-box-cover"></div>`。搜索框本身由`<div class="pr search-box">`包裹，内部...
js渐变显示渐变消失
ITbiyu的专栏
08-01 3165
以下是渐变的js代码(表示多余三行的要隐藏，点击"more"显示剩下的，点击“less”要逐渐隐藏)：function showAccomplishmentTableRow(){ $("#accomplishmenttable tr:hidden").first().show(2000,function(){ showAccomplishmentTableRow(); }); if($
Javascript 实现DIV透明度渐变、移动放大等效果
qtvb1987的专栏
07-14 2408
<br /><!DOCTYPEHTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /><title>透明度渐变、位置移动函数</title><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /><script><br />
JS+CSS透明渐变导航栏js特效
ICode联盟
12-14 238
JS+CSS透明渐变导航栏特效是一款渐变风格的个性网站半透明导航栏动画特效。
JS实现图片渐变
03-11
从其他地方讨来的。是word,里面有源代码，给需要的朋友。
js图片渐变
12-26
处理文字，图片渐变（当前为由浅变深），修改代码即可由深变浅。
javascript实现颜色渐变的方法
12-10
渐变(Gradient)是美学中一条重要的形式美法则，与其相对应的是突变。形状、大小、位置、方向、色彩等视觉因素都可以进行渐变。在色彩中，色相、明度、纯度也都可以产生渐变效果，并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的渐变算法。 已知：A=50，B=200，A、B之间平均分成3份（Step=3），求每份的数值（StepN）分别是多少。 公式：Gradient = A + (B-A) / Step * N 注]编程时为了提高效率避免浮点运算，往往把除法放在最后面，这样公式就成了：Gradient = A + (B-A) * N / Step Step=3时，根据公式可以求出S
零基础Web前端开发，原生javaScript实现图片透明渐变轮播（代码，vivo前端面试
m0_61943758的博客
04-06 238
/获取操作对象var dsq1 //图片切换的定时器名称var index=0 //图片和按钮同时的下标//先显示第一张图片//让图片进行切换hide1()index++index=0show1()//给大盒子对象绑定鼠标移入移出事件//给右边按钮绑定点击事件moveMent()hide1()index–index=4show1()//遍历li对象i++){//给每个li对象绑定点击事件hide1()//把当前点击的按钮下标赋值给indexindex=i。
js实现鼠标移入，透明度发生变化
cinqing
08-24 1582
js实现鼠标移入，透明度发生变化 *{ padding: 0; margin: 0; } div{ width: 200px; height: 100px; background: blue;
css渐变色半透明半遮挡，动态控制高度线性渐变效果
Cool_so_cool的博客
06-01 853
【代码】css渐变色半透明半遮挡，动态控制高度线性渐变效果。
JS实现简单的图片透明度循环变化（渐变）
Love丶伊卡洛斯
08-20 2006
找了好多，都是由100到0就结束了，到头来自己魔改，以下就是源码。 div中加入img，js添加函数，完事（调用），取名后面加个1是为了避免冲突 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>简单透明度渐变</title> </head...
html大屏四周透明度渐变
05-13
要实现 HTML 大屏四周透明度渐变的效果，可以使用 CSS3 的渐变属性 `linear-gradient()` 来实现。具体实现步骤如下： 1. 首先，在 HTML 页面中添加一个容器元素，例如 `<div>`，并设置其样式为全屏显示。 ```html <div class="container"></div> ``` ```css .container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } ``` 2. 在容器元素中添加四个元素作为四个边框，并分别设置其样式为透明度渐变。 ```html <div class="container"> <div class="border-top"></div> <div class="border-right"></div> <div class="border-bottom"></div> <div class="border-left"></div> </div> ``` ```css .container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .border-top, .border-right, .border-bottom, .border-left { position: absolute; opacity: 0; } .border-top { top: 0; left: 0; right: 0; height: 50px; background: linear-gradient(to bottom, transparent, black); } .border-right { top: 50px; right: 0; bottom: 50px; width: 50px; background: linear-gradient(to left, transparent, black); } .border-bottom { bottom: 0; left: 0; right: 0; height: 50px; background: linear-gradient(to top, transparent, black); } .border-left { top: 50px; left: 0; bottom: 50px; width: 50px; background: linear-gradient(to right, transparent, black); } ``` 3. 使用 JavaScript 实现透明度渐变效果，即当鼠标移入容器元素时，四个边框的透明度从 0 渐变到 0.8，当鼠标移出容器元素时，四个边框的透明度再渐变回 0。 ```html <div class="container" id="container"> <div class="border-top"></div> <div class="border-right"></div> <div class="border-bottom"></div> <div class="border-left"></div> </div> ``` ```css .container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .border-top, .border-right, .border-bottom, .border-left { position: absolute; opacity: 0; transition: opacity 0.5s; } .border-top { top: 0; left: 0; right: 0; height: 50px; background: linear-gradient(to bottom, transparent, black); } .border-right { top: 50px; right: 0; bottom: 50px; width: 50px; background: linear-gradient(to left, transparent, black); } .border-bottom { bottom: 0; left: 0; right: 0; height: 50px; background: linear-gradient(to top, transparent, black); } .border-left { top: 50px; left: 0; bottom: 50px; width: 50px; background: linear-gradient(to right, transparent, black); } .container:hover .border-top, .container:hover .border-right, .container:hover .border-bottom, .container:hover .border-left { opacity: 0.8; } ``` 这样，当鼠标移入容器元素时，四个边框的透明度会从 0 渐变到 0.8，形成透明度渐变效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值