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

谁践踏了优雅 2022-12-08 05:22 142阅读 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 条评论，142人围观）

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

相关阅读

相关页面跳转js修改样式

先点击按钮传递参数， <div class="container"> <a class="options" href="../f/fb.html?i

古城微笑少年丶/ 2023年06月29日 02:59/ 0 赞/ 12 阅读

相关 vue中通过js控制页面样式方法

　　在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再执行函数方法来处理初始化相关的操作，如果只处理页面位置、宽或者高时，必须要在页面完全渲染之后才可以，页面没有

爱被打了一巴掌/ 2023年06月10日 12:25/ 0 赞/ 8 阅读

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

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

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

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

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

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

相关 js控制css样式

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

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

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

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

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

相关【JavaScript】js控制样式

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

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

相关 js实现页面分页效果

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

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

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

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

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

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

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

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