html-css-js-sefficacy/index.html at main · lpya/html-css-js-sefficacy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./images/favicon.ico" />
  <title>HTML+CSS特效案例</title>
  <link rel="stylesheet" href="./styles/scrollbar.css">
  <link rel="stylesheet" href="./styles/index.css">
  <style>
    #link li {
      padding: 8px 0;
    }

    #link li a {
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="header"></div>
    <div class="content">
      <div class="list" id="list">
      </div>
    </div>
  </div>
  <script>
    function coverOnmouseover(e) {
      let text = e.target.style.background
      text = text.replace(".png", ".gif")
      e.target.style.background = text
    }
    function coverOnmouseout(e) {
      let text = e.target.style.background
      text = text.replace(".gif", ".png")
      e.target.style.background = text
    }
    function init() {
      const linkList = [
        { name: "登录表单", href: "./1-login/index.html", coverUrl: "./images/01.png" },
        { name: "底部波浪动画", href: "./2-wave/index.html", coverUrl: "./images/02.png" },
        { name: "loading加载（一）", href: "./3-loading-1/index.html", coverUrl: "./images/03.png" },
        { name: "旋转立方体", href: "./4-box/index.html", coverUrl: "./images/04.png" },
        { name: "骨架屏效果", href: "./5-skeleton/index.html", coverUrl: "./images/05.png" },
        { name: "特效之汉堡按钮抽屉功能", href: "./6-drawer/index.html", coverUrl: "./images/06.png" },
        { name: "炫酷的发光按钮", href: "./7-button/index.html", coverUrl: "./images/07.png" },
        { name: "loading加载（二）", href: "./8-loading-2/index.html", coverUrl: "./images/08.png" },
        { name: "开关灯切换效果", href: "./9-switch-theme/index.html", coverUrl: "./images/09.png" },
        { name: "列表标签", href: "./10-list-label/index.html", coverUrl: "./images/10.png" },
        { name: "激光扫描瞄准", href: "./11-radar/index.html", coverUrl: "./images/11.png" },
        { name: "发光卡片", href: "./12-light-card/index.html", coverUrl: "./images/12.png" },
        { name: "数字雨", href: "./13-digital-rain/index.html", coverUrl: "./images/13.png" },
        { name: "文本动画登录表单", href: "./14-login-text/index.html", coverUrl: "./images/14.png" },
        { name: "立体感loading加载效果", href: "./15-loading-3/index.html", coverUrl: "./images/15.png" },
        { name: "文字倒影效果", href: "./16-text-inverted/index.html", coverUrl: "./images/16.png" },
        { name: "文字发光效果", href: "./17-text-light/index.html", coverUrl: "./images/17.png" },
      ]
      let linkListDom = document.getElementById("list")

      linkList.forEach((item, index) => {
        // 链接
        let aLinkDom = document.createElement("a")
        aLinkDom.className = "card"
        aLinkDom.href = item.href
        //封面
        let coverDom = document.createElement("div")
        coverDom.className = "cover"
        coverDom.style.background = `url(${item.coverUrl})`
        coverDom.style.backgroundSize = "100% 100%"
        coverDom.onmouseover = coverOnmouseover
        coverDom.onmouseout = coverOnmouseout
        //标题
        let titleDom = document.createElement("div")
        titleDom.className = "title"
        titleDom.textContent = `${index + 1}-${item.name}`

        aLinkDom.appendChild(coverDom)
        aLinkDom.appendChild(titleDom)
        linkListDom.appendChild(aLinkDom)
      })

      for (let i = 0; i < 3; i++) {
        let cardDom = document.createElement("a")
        cardDom.className = "card1"
        linkListDom.appendChild(cardDom)
      }

    }
    init()
  </script>
</body>

</html>