精华内容
下载资源
问答
  • [javascript] js 动态控制透明度
    千次阅读
    2014-08-12 11:50:42
    var alpha = 50 ;
    var speed = 10 ;
    timer = setInterval(function(){
    	if(alpha == iTarget){
    		clearInterval(timer) ;		
    	}else{
    		alpha += speed ;
    		oDiv.style.fiilter = "alpha(opacity="+alpha+")" ;//IE
    		oDiv.style.opacity = alpha/100 ;//FF,Chrome	
    	}
    }, 30) ;

    更多相关内容
  • 如图,一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止。鼠标移出,透明度慢慢减少,减少到30. 要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,...

    如图,一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止。鼠标移出,透明度慢慢减少,减少到30.

    9735f2a0d9eb6b514067ba714d7d2b84.png

    要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值。

    var alpha=30;

    要点二:判断目标值和目前透明值,来判定是正向速度还是负向速度。

    if(target > alpha){

    speed = 2;

    }else{

    speed = -2;

    }

    要点三:如果透明值达到目标值,关掉定时器,否则透明值继续变化。最后把值赋给元素,因为透明度有兼容问题,所以要写上两个写法。

    if(alpha == target){

    clearInterval(timer);

    }

    else{

    alpha = alpha + speed;

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

    run.style.opacity = alpha/100;

    document.title = alpha;

    }

    最后,上代码

    69c5a8ac3fa60e0848d784a6dd461da6.png

    无标题文档

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

    startrun(100);

    }

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

    startrun(30);

    }functionstartrun(target){

    clearInterval(timer);

    timer=setInterval(function(){if(target>alpha){

    speed= 2;

    }else{

    speed= -2;

    }if(alpha==target){

    clearInterval(timer);

    }else{

    alpha=alpha+speed;

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

    run.style.opacity=alpha/100;document.title=alpha;

    }

    },30)

    }

    }

    展开全文
  • 控制Div层透明属性,由浅变深逐渐显示,由深变浅逐渐消失,具体实现代码如下,喜欢的朋友可以感受下
  • 其中的 material是来控制模型的透明度,颜色的对象。 那么如何通过点击按钮来控制模型的透明度 如果你的是Vue,完全可以给 opacity一个变量,利用Vue的双向数据绑定来随意变化透明度的值(取值范围为0~1) 原生的...

    利用ThreeJs加载stl文件

    我选择用这个js来渲染stl文件

    在这里插入图片描述
    渲染方法如下:
    在这里插入图片描述
    其中的 material是来控制模型的透明度,颜色的对象。

    那么如何通过点击按钮来控制模型的透明度

    在这里插入图片描述
    如果你用的是Vue,完全可以给 opacity一个变量,利用Vue的双向数据绑定来随意变化透明度的值(取值范围为0~1)
    原生的话 则需要通过改变对象内的属性值
    在这里插入图片描述
    其中的 id就是对象名,可以绑定一个点击事件通过点击来改变他们的透明度。

    到此为止可以基本实现模型的透明度控制,但是会发现如果同时加载多个stl文件的话,如果把上面的模型设置透明度,会给下面的模型一种‘马赛克’的感觉,所以还需要设置一个属性。

    在这里插入图片描述
    这样的话就会解决这个问题!!!

    展开全文
  • JavaScript动态控制图片透明度的变化.rarJavaScript动态控制图片透明度的变化.rarJavaScript动态控制图片透明度的变化.rarJavaScript动态控制图片透明度的变化.rarJavaScript动态控制图片透明度的变化.rarJavaScript...
  • * 十六进制color颜色/RGBA/RGB,改变透明度 * @param {*} thisColor #555 rgba(85,85,85,0.6) rgb(85,85,85) * @param {*} thisOpacity 0.7 * @returns rgba(85,85,85,0.7) */ export function getOpacityColor...
    /**
     * 十六进制color颜色/RGBA/RGB,改变透明度
     * @param {*} thisColor #555 rgba(85,85,85,0.6) rgb(85,85,85)
     * @param {*} thisOpacity 0.7
     * @returns rgba(85,85,85,0.7)
     */
    export function getOpacityColor(thisColor, thisOpacity) {
      var theColor = thisColor.toLowerCase();
      //十六进制颜色值的正则表达式
      var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      // 如果是16进制颜色
      if (theColor && r.test(theColor)) {
        if (theColor.length === 4) {
          var sColorNew = '#';
          for (var i = 1; i < 4; i += 1) {
            sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));
          }
          theColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for (var j = 1; j < 7; j += 2) {
          sColorChange.push(parseInt('0x' + theColor.slice(j, j + 2)));
        }
        return 'rgba(' + sColorChange.join(',') + ',' + thisOpacity + ')';
      }
      // 如果是rgba或者rgb
      if (theColor.startsWith('rgb')) {
        let numbers = theColor.match(/(\d(\.\d+)?)+/g);
        numbers = numbers.slice(0, 3).concat(thisOpacity);
        return 'rgba(' + numbers.join(',') + ')';
      }
    
      return theColor;
    }
    
    展开全文
  • js改变透明度的方式

    千次阅读 2020-06-12 20:42:30
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document</title> <style> *{ margin: 0; padding: 0; } #big { height: 300px;
  • js控制div层背景半透明

    千次阅读 2016-01-11 17:57:55
    //火狐中 设置地图透明度 CSS样式的filter(滤镜效果)对HTML的一些标记设置滤镜效果。 黑白照片 filter: gray; X光照片 filter: Xray; 风动模糊 filter: blur(add=true,direction=45,strength=30); ...
  • JavaScript动态控制图片透明度的变化

    千次阅读 2016-07-11 11:05:47
    <title>JavaScript动态控制图片透明度的变化 <script language=javascript> nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if...
  • javascript控制Div层透明属性,由浅变深逐渐显示,由深变浅逐渐消失 - www.jquerycn.cnvar SysIsIE;var ua = navigator.userAgent.toLowerCase();var s;(s = ua.match(/msie ([\d.]+)/)) ? SysIsIE = s[1] : 0;...
  • CSS以及js半透明

    2012-10-30 21:46:20
    CSS以及javascript半透明控制,兼容firefox 和 IE浏览器
  • 主要根据主题色获取对应的透明度做对比色 /** *主题色透明度获取 * @param opacity 透明度 * @param web_color 主题色(#666666) * @returns rgba */ web_color_opacity(opacity,web_color) { return "rgba(...
  • 实现图片透明度渐变; 点击Li,显示对应图片; 点击左右按钮,分别显示上一张、下一张图片; 鼠标移入,渐变停止;鼠标移出,渐变开始 代码如下: <style> *{ margin:0px; padding: 0px; text-...
  • 在OpenLayers项目实践中,我们会在地图上叠加栅格图层,我们希望可以在用户端控制图层的透明度来动态显示栅格图层
  • 找了好多,都是由100到0就结束了,到头来自己魔改,以下就是源码。 div中加入img,js添加函数,完事(调用),取名后面加个1是为了避免冲突 <!...简单透明度渐变</title> </head...
  • Three.js 透明物体不能正常显示/渲染顺序的控制问题
  • JS控制DIV的透明度

    万次阅读 2014-01-06 13:18:09
    Layer1.style.alpha = "50%"; 不中? 仅支持 FF document.getElementById("Layer1").style.opacity = "0.5"; IE Only document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";...
  • <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <!--引入jQuery-->...script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script...
  • js 轮播图(透明度

    千次阅读 2019-10-24 18:21:29
    js 轮播图(透明度用透明度的方式来实现轮播图 先说下思路,我们首先应该考虑下页面的结构。 第一,我们在做网站的时候,不可能一个页面都是轮播图,所以我们首先需要一个大的盒子,来把轮播图包起来,这里我...
  • 坑:如果使用arcgis server发布地图中包含若干个子图层,在arcgis api for js 中使用动态图层的方式加载,则在map对象里面是以一个图层的方式存在,此时设置图层的透明度,只能控制全部子图层的透明度。 如何控制每...
  • Document *{ margin:0px; padding:0px; list-style: none; } #parent{ width: 600px; height: 12px; position: relative; top: 12px;
  • 小叶层不透明度控制 基于Leaflet图层的基本不透明度控件。 设置和使用 通过安装Leaflet的图层不透明度控件。 $ bower install leaflet-layer-opacity-control 在您的网页中,同时包含分发脚本和样式表。 例如, &...
  • 在正常态时,每个导航的默认样式为: 当前页面的导航透明度为1.为了实现这个目的:首先通过body给不同的页面添加不同的类,用来标志不同的页面 所有的li也class标志,为了有一个一一对应的关系:然后就可以设置...
  • 实例代码记录: [removed] function start_sms_button(obj){ var count = 1 ; var sum = 30; var i = setInterval(function(){ if(count > 10){ obj.attr('disabled',false);... obj.val('剩余'+parseIn
  • 目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效。这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。关于CSS 透明度,...
  • 关于微信小程序自定义导航栏,滚动控制透明度问题, 简单的思路 是在onPageScroll 的api里面控制自定义导航栏的样式 先简单说自定义导航栏,因为全面屏的关系,我们要先获取到手机状态栏的具体高度,来实现兼容各种...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,653
精华内容 17,861
关键字:

如何用js控制透明度