给页面添加点击页面出现富强、民主、文明这类文字动画效果 折腾教程

站长 折腾 2022-5-12 3982

JS代码放到全局内容页尾(全局 : html > body ( footer_js_after ))

  1. <script>
  2. !function() {
  3. var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
  4. index = Math.floor(Math.random() * coreSocialistValues.length);
  5. document.body.addEventListener('click', function(e) {
  6. if (e.target.tagName == 'A') {
  7. return;
  8. }
  9. var x = e.pageX,
  10. y = e.pageY,
  11. span = document.createElement('span');
  12. span.textContent = coreSocialistValues[index];
  13. index = (index + 1) % coreSocialistValues.length;
  14. span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #1976d2; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
  15. document.body.appendChild(span);
  16. animate(span);
  17. });
  18. function animate(el) {
  19. var i = 0,
  20. top = parseInt(el.style.top),
  21. id = setInterval(frame, 16.7);
  22. function frame() {
  23. if (i > 180) {
  24. clearInterval(id);
  25. el.parentNode.removeChild(el);
  26. } else {
  27. i += 2;
  28. el.style.top = top - i + 'px';
  29. el.style.opacity = (180 - i) / 180;
  30. }
  31. }
  32. }
  33. }()
  34. </script>
──── 0人觉得很赞 ────
最新回复 (0)
返回