jquery改变网页背景颜色切换

所属分类: 网页特效-其它&杂项    2024-10-31 09:05:59

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

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

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

jquery多线段时间线自动切换显示内容插件

一款时间线段轮询显示文本内容特效代码,用户可以通过单击多边形链中的圆点,进行切换显示对应文本文字内容。
  其它&杂项
 8221  0

jquery点击动态移除制动链接href属性插件

一款轻量级标签属性移除插件,可通过一个JS调用来触发删除绑定的DOM元素中的单个或多个属性标签。
  其它&杂项
 1200  0

CSS文本文字玻璃透明效果代码

在页面背景图片上创建了一个带有阴影的模糊玻璃覆盖层,这种效果有助于增强网站视觉吸引力。
  其它&杂项
 5295  0

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

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