js控制样式，页面往前效果

谁践踏了优雅 2022-12-08 05:22 89阅读 0赞

## js控制节点样式变化，做到往前推动效果 ##

--------------------

### 监听某个值，改变节点样式，做到往前推动效果 ###

不能同时改变两个，或两个以上节点样式，不然会有卡顿效果
     watch: {
        runTime(val, old) {
          let pageNode = 50;
          let bar = parseFloat(val % 50); //50个节点1P
          let scaleVal = 1 + bar * (2 / 49); //放大1+1.5倍
          let opacity1 = 1 - 0.05 * (bar - 29); //30后面(20个节点)节点开始透明，每节点透明度减0.05
          let opacityTiem1 = 30; //(50-30个节点)
          if (val < pageNode) {
            if (bar >= opacityTiem1) {
            //这里不能同时改变两个，或两个以上节点样式，不然页面会有卡顿效果
              this.page3.style.cssText =
                "opacity:" + opacity1 + ";transform:scale(" + scaleVal + ");";
            } else {
            //这里不能同时改变两个，或两个以上节点样式，不然页面会有卡顿效果
              this.page3.style.transform = "scale(" + scaleVal + ")";
            }
          } else if (val < pageNode * 2) {
            if (bar >= opacityTiem1) {
              this.page4.style.cssText =
                "opacity:" + opacity1 + ";transform:scale(" + scaleVal + ");";
            } else {
              this.page4.style.transform = "scale(" + scaleVal + ")";
            }
          }
      },

发表评论取消回复

表情：

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

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

相关阅读

相关 Js控制css样式的一个实践

主要思路是通过给html动态设置css变量，在对应位置使用该变量实现 function setCssProperty(key,value){ docu

秒速五厘米/ 2023年01月03日 04:45/ 0 赞/ 183 阅读

相关 js控制样式，页面往前效果

js控制节点样式变化，做到往前推动效果 -------------------- 监听某个值，改变节点样式，做到往前推动效果不能同时改变两个，或两个以上

谁践踏了优雅/ 2022年12月08日 05:22/ 0 赞/ 90 阅读

相关 CSS3样式控制input按钮效果

.clearfix:before, .clearfix:after { display: table; content: " ";

待我称王封你为后i/ 2022年09月25日 12:21/ 0 赞/ 232 阅读

相关 js控制css样式

方法一: 将css单独写在一个css文件中, 在js中通过className属性赋值创建一个XXX.css文件, 内容如下: .aDiv { di

我会带着你远行/ 2022年08月09日 05:13/ 0 赞/ 199 阅读

相关通过样式控制页面布局

原始页面写法： ![Center][] 原始页面效果： ![Center 1][] 添加样式修改后页面写法： td div { floa

末蓝、/ 2022年07月11日 04:20/ 0 赞/ 141 阅读

相关【JavaScript】js控制样式

网页的三个层次简单理解：结构：html标签样式：css样式表行为：js及其扩展 JS控制样式： 1.找准对象

男娘i/ 2022年06月11日 08:47/ 0 赞/ 229 阅读

相关 js 前段，页面数据校验总结

/\ \ Translated default messages for the jQuery validation plugin. \ Locale: ZH (C

一时失言乱红尘/ 2022年05月29日 09:38/ 0 赞/ 128 阅读

相关 js实现页面分页效果

最近接触老项目，项目要求修改表格添加分页功能，采用的bootstrap-table,在完成项目后，决定原生简单实现一下分页效果。效果： ![watermark_type_

谁借莪１个温暖的怀抱￠/ 2021年11月23日 00:42/ 0 赞/ 478 阅读

相关 js 关闭页面前进行操作

window.onbeforeunload = function() { alert(''); } 这个方法chr

深碍√TFBOYSˉ_/ 2021年11月16日 11:20/ 0 赞/ 374 阅读

相关 vue/js - 实现页面自动往上滑动效果

最近做的新项目中要求让看不见的内容自动往上滑动一定的距离，使之可以看到，下面我来分享一下。效果图： ![在这里插入图片描述][20200102144258781.

客官°小女子只卖身不卖艺/ 2021年08月14日 01:50/ 0 赞/ 692 阅读