首页 > 其他分享 >用户阅读文章时突显文章区域的JS小细节

用户阅读文章时突显文章区域的JS小细节

时间:2024-09-08 20:23:49浏览次数:9  
标签:opacity 区域 js important 阅读文章 时候 JS 突显

浏览36kr的时候,发现有一处地方还是很新鲜的,阅读文章的时候,除了文章的区域之外,其他的地方都变淡,这样的话,整个屏幕就只剩下文章区域,似乎对阅读文章的时候,用户体验还是很赞的~

于是就模仿做了一下,每个人都有不同的看法,做个收藏,需要的时候可以自行添加上去

首先定义一个样式,就是在js判断滚动的时候,什么时候给指定的区域添加一个样式类:

.imask {opacity: .2 !important;transition: opacity .2s !important;}

其次js判断,鼠标监听判断鼠标滚动方向,向下就变淡,向上就还原 

 

 

标签:opacity,区域,js,important,阅读文章,时候,JS,突显
From: https://blog.csdn.net/2401_86745316/article/details/142006015

相关文章

  • 基于Node.js+vue基于WEB的在线阅读系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和普及,人们的阅读习惯正经历着深刻的变革。传统的纸质阅读方式逐渐被数字化、网络化所取代,在线阅读因其便捷性、即时性和丰富性成......
  • 基于Node.js+vue基于app的农产品销售系统的设计与实现(开题+程序+论文) 计算机毕业设
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着移动互联网技术的迅猛发展,智能手机已成为人们日常生活中不可或缺的一部分,极大地改变了人们的消费习惯与生活方式。在农业领域,传统的农产品销售模式往往......
  • 基于Node.js+vue机票订单管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着全球经济的飞速发展和人们生活水平的提高,航空旅行已成为人们出行的重要方式之一。机票预订市场的日益繁荣,不仅促进了航空业的发展,也对机票订单管理提出......
  • 基于Node.js+vue基于的仓储管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着现代物流业的快速发展,仓储管理作为供应链管理中至关重要的一环,其效率与准确性直接影响到企业的运营成本与客户满意度。传统的人工仓储管理模式已难以应......
  • class 4: vue.js 3监听器 watch
    某些情况下需要监听某个响应式数据的变化,这时就需要使用监听器(watch)来实现了watch的使用语法如下选项:watch类型:{[key:string]:string|Function|Object|Array}详解:watch属性是一个对象,该对象的键(key)是需要观察的表达式,值(value)可以是回调函数、方法名等。Vu......
  • 基于Pinia和Compute的持久化localStorage登录态管理Vuejs 源码教学
    piniaPinia是一个专为Vue3设计的状态管理库,它借鉴了Vuex的一些概念,但更加轻量灵活,使得状态管理变得更加简单直观。Pinia通过提供一种基于Vue3响应式API的状态管理机制,让我们可以更加优雅地管理应用程序的状态。computedVue的computed属性是一种特殊的数据属性,它们根据组......
  • Java毕业设计源码 - ssm框架网上服装销售系统+jsp+vue+数据库mysql+毕业论文等
    文章目录前言一、毕设成果演示(源代码在文末)二、毕设摘要展示1、开发说明2、需求/流程分析3、系统功能结构三、系统实现展示1、用户功能模块2、管理员功能模块四、毕设内容和源代码获取总结逃逸的卡路里博主介绍:✌️码农一枚|毕设布道师,专注于大学生项目实战开发、......
  • 基于vue.js和node.js的在线购物网站设计和实现----附源码83077
    目 录摘要1绪论1.1研究背景1.2 研究意义1.3论文结构与章节安排2 系统分析2.1可行性分析2.2系统流程分析2.2.1数据新增流程2.2.2 数据删除流程2.3 系统功能分析2.3.1功能性分析2.3.2非功能性分析2.4 系统用例分析3系统总体设计......
  • js事件冒泡和事件委托
    事件冒泡是指当一个元素上的事件被触发时,事件会从最内层的目标元素开始,逐级向上传播到父级元素,直到到达最顶层的祖先元素(通常是document对象)。这是一种默认的事件传播方式。示例:html复制代码<divid="parent"> <buttonid="child">Clickme</button></div>javascript复制......
  • Vue.js入门系列(二十三):集成第三方动画库、总结过渡与动画、配置代理
    个人名片......