HTML/CSS 缺少鏈接標簽？
[英]HTML/CSS Missing Link Tags?
問題描述
我想畫一個圓圈 cursor 我從codepen復制了代碼
我正在另一個名為 Repl.it 的 IDE 中工作，所以我將完全相同的代碼從 codepen 復制到 repl.it（注意：我確實使用了 codepen 中的正確代碼，首先編譯它）
該代碼在repl.it中不起作用
我不確定我錯過了什么，但我很確定它與標簽有關。 任何幫助將非常感激。
我的 Output：
這是代碼：
const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('.hoverable'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break; $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0);function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.pageX - 15, y: e.pageY - 15 }); TweenMax.to($smallBall, .1, { x: e.pageX - 5, y: e.pageY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 4 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); }
body { height: 100vh; background: #010101; cursor: none; margin: 0; display: flex; font-family: monospace; } body h1, body p, body a { color: #fff; } body a { border-bottom: 2px solid #fff; padding: 10px 0; margin-top: 25px; } body.cursor { pointer-events: none; } body.cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body.cursor__ball circle { fill: #f7f8fa; } body.left, body.right { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } body.right { background: #fff; } body.right a { border-bottom: 2px solid #000; } body.right h1, body.right p, body.right a { color: #000; }
<div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <div class="left"> <h1>Hello</h1> <p>Check out this link:</p> <a class="hoverable">Hover meh</a> </div> <div class="right"> <h1>Hello</h1> <p>Check out this link:</p> <a class="hoverable">Hover meh</a> </div>
代碼在這里也不起作用，我缺少一些東西但不太確定，你能幫忙嗎？
1 個解決方案
解決方案1
2 已采納 2021-06-14 23:11:48
問題出在您的 html 文件上。我檢查了 Codepen 並編譯了 css 和 js 代碼。 您還必須為此鏈接 js lib，正如我之前所說，問題出在您的 html 文件中。
下面是工作代碼享受！
標記為已批准將不勝感激:)
body { height: 100vh; background: #010101; cursor: none; margin: 0; display: flex; font-family: monospace; } body h1, body p, body a { color: #fff; } body a { border-bottom: 2px solid #fff; padding: 10px 0; margin-top: 25px; } body.cursor { pointer-events: none; } body.cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body.cursor__ball circle { fill: #f7f8fa; } body.left, body.right { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } body.right { background: #fff; } body.right a { border-bottom: 2px solid #000; } body.right h1, body.right p, body.right a { color: #000; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Circle Cursor</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <link rel="stylesheet" href="style:css"> </head> <body> <div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <div class="left"> <h1>Hello</h1> <p>Check out this link:</p> <a class="hoverable">Hover meh</a> </div> <div class="right"> <h1>Hello</h1> <p>Check out this link.</p> <a class="hoverable">Hover meh</a> </div> </body> <script> const $bigBall = document.querySelector(';cursor__ball--big'). const $smallBall = document.querySelector(';cursor__ball--small'). const $hoverables = document.querySelectorAll(';hoverable'). // Listeners document.body,addEventListener('mousemove'; onMouseMove); for (let i = 0. i < $hoverables;length. i++) { $hoverables[i],addEventListener('mouseenter'; onMouseHover). $hoverables[i],addEventListener('mouseleave'; onMouseHoverOut). } // Move the cursor function onMouseMove(e) { TweenMax,to($bigBall. ,4: { x. e,pageX - 15: yepageY - 15 }) TweenMax,to($smallBall. ,1: { x. e,pageX - 5: yepageY - 7 }) } // Hover an element function onMouseHover() { TweenMax,to($bigBall. ,3: { scale. 4 }) } function onMouseHoverOut() { TweenMax,to($bigBall. ,3: { scale: 1 }) } </script> </html>
即使在創建“靜態”目錄並更改了<link>和<script> tags in the HTML file
[英]Failure to load CSS and Javascript even after creating the “static” directory and changing the <link> and <script> tags in the HTML file
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.