关键代码

最新推荐文章于 2023-09-04 00:03:54 发布

Acpo

最新推荐文章于 2023-09-04 00:03:54 发布

阅读量768

点赞数

分类专栏：前端拓展文章标签： javascript vue web

本文链接：https://blog.csdn.net/weixin_45102270/article/details/113360925

版权

前端拓展专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

鼠标点击字节跳动效果

var fnTextPopup = function (arr, options) {
  // arr参数是必须的
  if (!arr || !arr.length) {
      return;    
  }
  // 主逻辑
  var index = 0;
  document.documentElement.addEventListener('click', function (event) {
      var x = event.pageX, y = event.pageY;
      var eleText = document.createElement('span');
      eleText.className = 'text-popup';
      this.appendChild(eleText);
      if (arr[index]) {
          eleText.innerHTML = arr[index];
      } else {
          index = 0;
          eleText.innerHTML = arr[0];
      }
      // 动画结束后删除自己
      eleText.addEventListener('animationend', function () {
          eleText.parentNode.removeChild(eleText);
      });
      // 位置
      eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
      eleText.style.top = (y - eleText.clientHeight) + 'px';
      // index递增
      index++;
  });    
};

fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);

<!--
                      _.._        ,------------.
                   ,'      `.    ( We want you! )
                  /  __) __` \    `-,----------'
                 (  (`-`(-')  ) _.-'
                 /)  \  = /  (
                /'    |--' .  \
               (  ,---|  `-.)__`
                )(  `-.,--'   _`-.
               '/,'          (  Wy",
                (_       ,    `/,-' )
                `.__,  : `-'/  /`--'
                  |     `--'  |
                  `   `-._   /
                   \        (
                   /\ .      \.  YLSAT.COM
                  / |` \     ,-\
                 /  \| .)   /   \
                ( ,'|\    ,'     :
                | \,`.`--"/      }
                `,'    \  |,'    /
               / "-._   `-/      |
               "-.   "-.,'|     ;
              /        _/["---'""]
             :        /  |"-     '
             '           |      /
                         `      |
-->

判断是否支持HTML 5

window.onload = function () {
    if (!window.applicationCache) {
        window.location.href = "ie.html";
    }
}

a链接跳转

<!--qq添加好友-->
<p><span>站长QQ：</span><a href="tencent://message/?uin=1170461017\">117 046 1017</a></p> 

<!--发送邮件-->
<p><span>站长信箱：</span><a href="mailto:admin@ylsat.com">admin@ylsat.com</a></p>

原生active类高亮

let itemClass = null

function SetActive(elem) {
  for (let key in elem) {
    // 过滤对象原型
    if (elem.hasOwnProperty(key)) {
  
      elem[key].addEventListener('click', () => {
        itemClass = elem[key].classList
  
        for(let i = 0 ; i < elem.length ;i++){
          elem[i].classList.remove('on')
          itemClass.add('on')
        }
      })
    }
  }
}

// 获取ul元素
const testItem = document.getElementsByClassName('test-item')
new SetActive(testItem)