jquery改变网页背景颜色切换

所属分类: 网页特效-其它&杂项    15小时前上传

jquery改变网页背景颜色切换 ie兼容6
反馈问题  查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery改变网页背景颜色切换(共5个文件)

    • index.html

使用方法

$(document).ready(function () {
  // Color Picker Tool Js
  const themeSwitchers = document.querySelectorAll('span');
  const dynamicInputs = document.querySelectorAll('input.input-color-picker');
  
  const handleThemeUpdate = (cssVars) => {
    const root = document.querySelector(':root');
    const keys = Object.keys(cssVars);
    keys.forEach(key => {
      root.style.setProperty(key, cssVars[key]);
    });
  }
  
  themeSwitchers.forEach((item) => {
    item.addEventListener('click', (e) => {
      const bgColor = e.target.getAttribute('data-bg-color')
      const color = e.target.getAttribute('data-color')
      handleThemeUpdate({
        '--primary-bg-color': bgColor,
        '--primary-color': color
      });
      
      console.log(bgColor, color)
      $("input.input-color-picker[data-id='color']").val(color)
      $("input.input-color-picker[data-id='bg-color']").val(bgColor)
    });
  });
  
  dynamicInputs.forEach((item) => {
    item.addEventListener('input', (e) => {
      const cssPropName = `--primary-${e.target.getAttribute('data-id')}`;
      console.log(cssPropName)
      handleThemeUpdate({
        [cssPropName]: e.target.value
      });
    });
  });
  
});

站长提示:
1. 平台上所有素材资源,需注册登录会员方能正常下载。
2. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励20K币
3. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
4. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 其它&杂项

jquery当浏览器切换到其它标签页时更改标题

这是一款浏览器标签选项卡切换特效,当浏览器中的选项卡切换到其它页面时,页面标题自动变更为设置的文本文字。
  其它&杂项
 6163  0

html+css创建的按时间顺序排列的垂直时间轴

一款公司历史大事记垂直时间轴布局模板,它使用CSS样式来设计时间线,为了能让用户更快更轻松的阅读。
  其它&杂项
 7399  0

jquery支持点击导航菜单和select下拉菜单的滚动特效代码

一款单页全屏滚动插件,响应式布局设计,支持多种操作触发滚动:导航菜单、li焦点、鼠标滚轮、select下拉菜单。
  其它&杂项
 8161  0

javascript根据用户活动操作定时关闭通知栏插件

当用户处于非活动状态15分钟后自动注销,通过设置好空闲时间后,自动注销用户来确保增强的安全性,同时记录到session变量保存。
  其它&杂项
 2177  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论