分类前端技术下的文章

2024-08-24

在Three.js中，要将3D模型居中，你需要计算模型的边界框，然后将模型的中心与场景的中心对齐。以下是实现这一目标的代码示例：




import * as THREE from 'three';
 
// 假设你已经有了一个加载好的3D模型，并且添加到了场景中
// 模型对象: model
 
// 创建一个用于计算边界的助手对象
const box = new THREE.Box3().setFromObject(model);
 
// 计算边界中心点
const center = new THREE.Vector3();
box.getCenter(center);
 
// 计算模型的尺寸
const size = new THREE.Vector3();
box.getSize(size);
 
// 将模型的中心移动到场景的中心
// 假设你的场景宽高比为1:1，且已经有了一个camera和renderer对象
model.position.x -= center.x;
model.position.y -= center.y;
model.position.z -= center.z;
 
// 如果场景的宽高比不是1:1，你可能还需要调整模型的位置以保持居中
// 计算宽和高的最大值，并除以2得到中心点
const maxDim = Math.max(size.x, size.y, size.z);
const halfDim = maxDim / 2;
 
// 根据宽高比调整模型位置
if (camera.aspect > 1) {
    model.position.x -= halfDim;
} else {
    model.position.y -= halfDim;
}
 
// 更新camera的lookAt，确保模型居中
camera.lookAt(model.position);
 
// 更新渲染器的场景和camera
renderer.render(scene, camera);

这段代码首先计算了3D模型的边界框，然后计算了模型的中心点并将其移动到了原点。接着根据场景的宽高比调整模型的位置，使其在场景中居中。最后更新了camera的lookAt，以确保模型始终处于可视状态。

- 阅读更多 -

html5拖拽文件上传需阻止默认事件

System

2024-08-24

所有,html5




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop File Upload</title>
<script>
  function dragOver(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
  }
 
  function drop(event) {
    event.stopPropagation();
    event.preventDefault();
    const files = event.dataTransfer.files;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      // 这里可以添加上传逻辑
      console.log('文件名:', file.name);
    }
  }
</script>
</head>
<body>
<div id="dropZone" style="width: 300px; height: 200px; border: 2px dashed #aaa;"
     ondragover="dragOver(event)" ondrop="drop(event)">
  拖拽文件到此处上传
</div>
</body>
</html>

这段代码演示了如何创建一个可以拖拽文件到并通过HTML5的Drag and Drop API上传文件的区域。它阻止了默认的文件打开行为，并设置了合适的样式。在实际应用中，你可以在drop函数中添加上传文件的逻辑。

- 阅读更多 -

HTML5大纲查看器：Chrome插件新星

System

2024-08-24

所有,html5

由于原始代码已经是一个较为完整的示例，下面的代码实例将是一个简化版本，展示了如何在一个Chrome扩展中注入一个简单的HTML5大纲查看器。




// manifest.json
{
  "name": "HTML5 大纲查看器",
  "version": "1.0",
  "description": "为网页提供HTML5大纲查看器的支持",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentscript.js"]
    }
  ]
}
 
// popup.html
<!DOCTYPE html>
<html>
<head>
  <title>HTML5 大纲查看器</title>
</head>
<body>
  <p>点击图标为当前页面启用大纲查看器。</p>
</body>
</html>
 
// contentscript.js
function injectOutlineViewer() {
  // 创建大纲查看器的DOM元素
  const viewer = document.createElement('div');
  viewer.id = 'html5-outline-viewer';
  // 添加样式（简化版）
  viewer.style.position = 'fixed';
  viewer.style.top = '0';
  viewer.style.left = '0';
  // 构建大纲树并添加到DOM中
  const outline = constructOutlineTree();
  viewer.innerHTML = '<h1>大纲</h1>' + outline;
  document.body.appendChild(viewer);
}
 
function constructOutlineTree() {
  // 模拟构建大纲树的逻辑
  const headings = document.querySelectorAll('h1, h2, h3');
  let outline = '';
  headings.forEach(heading => {
    outline += `<li><a href="#${heading.id}">${heading.textContent}</a></li>`;
  });
  return `<ul>${outline}</ul>`;
}
 
// 注入大纲查看器
injectOutlineViewer();

这个简化版的代码实例展示了如何在一个Chrome扩展中注入一个简单的HTML5大纲查看器。它定义了一个injectOutlineViewer函数来创建一个DOM元素并将大纲树作为HTML插入，然后将其添加到页面的body中。这个例子省略了具体的构建大纲树的逻辑，并假设constructOutlineTree函数返回了一个构建好的大纲列表HTML字符串。

- 阅读更多 -

Howler.js HTML5声音引擎

System

2024-08-24

所有,html5

Howler 是一个JavaScript库，用于在Web浏览器中创建和管理音频。它提供了一个简单的接口来处理多个音频缓冲区和音频解码，以及控制音频的播放、暂停、停止等。

以下是使用Howler.js的一个基本示例：




// 引入Howler.js库
const { Howl } = require('howler');
 
// 声明音频文件的路径
const sound = {
  src: ['sounds/drum.mp3', 'sounds/drum.ogg'],
  volume: 0.5
};
 
// 使用Howl创建一个新的音频实例
const drum = new Howl(sound);
 
// 播放音频
drum.play();

在这个例子中，我们首先引入了Howler.js库。然后，我们定义了一个包含音频文件路径和音量的对象。接着，我们使用这个对象创建了一个Howl实例，最后我们通过调用play方法来播放音频。

Howler.js 提供了多种方法来控制音频，如定位、循环、立体声等。它还支持从Web Audio API自动回退到HTML5音频元素，使其在多种浏览器上都有良好的兼容性。

- 阅读更多 -

HTML5基础认知，网页前端开发前景

System

2024-08-24

所有,html5

HTML5是HTML的最新标准，于2014年被W3C推荐，它提供了新的元素和功能，如画布（Canvas）、视频（Video）和音频（Audio）播放、离线存储、Socket通信等，以改善web应用程序的用户体验。

前端开发是创建网页和应用程序界面的过程，大多数情况下使用HTML、CSS和JavaScript。随着HTML5的广泛应用，前端开发者的需求量也在增加，工作机会和薪资也在稳步增长。

解决方案：

学习HTML5的新特性和语法。
掌握CSS3和新的布局技术，如Flexbox和Grid。
掌握JavaScript和ES6+，以及相关的框架和库，如React, Angular, Vue等。
了解响应式设计和跨浏览器兼容性。
学习SEO和优化网页性能。
熟悉使用版本控制系统，如Git。

以下是一个简单的HTML5页面示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Welcome to HTML5</h1>
    <p>This is a paragraph with <strong>HTML5</strong> support.</p>
    <img src="image.jpg" alt="Sample Image">
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    <script>
        // JavaScript code here
    </script>
</body>
</html>

这个示例展示了HTML5的基本元素，包括语义化的头部（header）和文件（footer）、图片（img）、音频（audio）和视频（video），以及一些基本的JavaScript代码。

- 阅读更多 -

HTML5——超强的 SVG 动画

System

2024-08-24

所有,html5

SVG 动画可以通过 SMIL 或者 JavaScript 实现。以下是一个使用 SMIL 的 SVG 圆形进度条示例：




<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="54" fill="none" stroke-width="10" stroke="#000" class="progress-circle" />
  <circle cx="60" cy="60" r="54" fill="none" stroke-width="10" stroke="#f00" stroke-dasharray="314" stroke-dashoffset="314" class="progress-circle-bg" />
  <text x="50%" y="50%" class="progress-text" text-anchor="middle" dy=".3em" font-size="2em">0%</text>
</svg>
 
<script>
  const circle = document.querySelector('.progress-circle');
  const text = document.querySelector('.progress-text');
  const length = Math.PI * 2 * circle.r.baseVal.value;
 
  function setProgress(percentage) {
    const offset = length - percentage / 100 * length;
    circle.setAttribute('stroke-dashoffset', offset);
    text.textContent = Math.round(percentage) + '%';
  }
 
  // 使用 SMIL 动画
  // <animate> 元素定义了一个动画，在 5 秒内将 stroke-dashoffset 从 314 改变至 0
  circle.innerHTML += '<animate attributeName="stroke-dashoffset" dur="5s" from="314" to="0" fill="freeze" />';
 
  // 或者使用 JavaScript 动画
  setTimeout(() => setProgress(100), 5000); // 在 5 秒后设置进度条为 100%
</script>

这段代码定义了一个 SVG 圆形进度条，并通过 SMIL 动画在 5 秒内从 0% 加载到 100%。如果需要使用 JavaScript 控制动画，可以移除 <animate> 元素并使用 setTimeout 调用 setProgress 函数。这两种方式都展示了如何在 HTML5 中使用 SVG 制作动画。

- 阅读更多 -

HTML5快速入门

System

2024-08-24

所有,html5

HTML5是HTML的最新标准，它为现代网页开发提供了丰富的功能和更灵活的标签。以下是一个简单的HTML5页面示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 快速入门</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ul>
    <img src="image.jpg" alt="描述性文本">
</body>
</html>

这个示例包含了一些基本的HTML5元素：

<!DOCTYPE html> 声明这是HTML5文档。
<html> 元素是整个网页的根元素。
<head> 包含了此网页的元数据，如标题和字符集定义。
<title> 定义了网页的标题。
<body> 包含了网页的主要可见部分，如文本、图像、视频等。
<h1> 定义了一个大标题。
<p> 定义了一个段落。
<ul> 和 <li> 定义了一个无序列表。
<img> 标签用来插入图片，src 属性指定图片的路径，alt 属性提供了图片的文本替代。

System

2024-08-24

所有,html5

HTML5 提供了“本地存储”功能，可以在客户端存储数据。这些数据不会随着HTTP请求发送到服务器，可以用于缓存数据以提高应用程序的性能。

HTML5 提供了两种本地存储方式：

localStorage：用于长久保存数据，数据永远不会过期，除非主动删除。
sessionStorage：用于临时保存数据，数据在浏览器关闭后会自动删除。

以下是使用localStorage和sessionStorage的示例代码：




<!DOCTYPE html>
<html>
<body>
 
<h2>LocalStorage 示例</h2>
 
<p>点击按钮设置本地存储，然后刷新页面检查数据是否仍然存在。</p>
 
<button onclick="setLocalStorage()">设置 LocalStorage</button>
<button onclick="getLocalStorage()">获取 LocalStorage</button>
<button onclick="removeLocalStorage()">移除 LocalStorage</button>
<div id="output"></div>
 
<script>
function setLocalStorage() {
  localStorage.setItem('key', 'value');
}
 
function getLocalStorage() {
  var value = localStorage.getItem('key');
  document.getElementById("output").innerHTML = value;
}
 
function removeLocalStorage() {
  localStorage.removeItem('key');
}
</script>
 
<h2>SessionStorage 示例</h2>
 
<p>点击按钮设置sessionStorage，然后关闭标签页检查数据是否还存在。</p>
 
<button onclick="setSessionStorage()">设置 SessionStorage</button>
<button onclick="getSessionStorage()">获取 SessionStorage</button>
<button onclick="removeSessionStorage()">移除 SessionStorage</button>
<div id="output2"></div>
 
<script>
function setSessionStorage() {
  sessionStorage.setItem('key', 'value');
}
 
function getSessionStorage() {
  var value = sessionStorage.getItem('key');
  document.getElementById("output2").innerHTML = value;
}
 
function removeSessionStorage() {
  sessionStorage.removeItem('key');
}
</script>
 
</body>
</html>

在这个例子中，我们创建了一个HTML页面，其中包含了使用localStorage和sessionStorage的基本操作。点击相应的按钮会执行设置、获取和移除数据的函数。这些操作会在浏览器的客户端存储中保存、检索和删除数据。

- 阅读更多 -

jQuery动画

System

2024-08-24

所有,jquery

在jQuery中，有许多种方法可以用来创建动画。以下是一些常见的方法：

show()和hide()方法：这是最基本的显示和隐藏动画。




$("#element").show(3000); // 显示动画，时长3000毫秒
$("#element").hide(2000); // 隐藏动画，时长2000毫秒

fadeIn()和fadeOut()方法：这些方法用于淡入和淡出元素。




$("#element").fadeIn(500); // 淡入动画，时长500毫秒
$("#element").fadeOut(1000); // 淡出动画，时长1000毫秒

slideDown()和slideUp()方法：这些方法用于向下和向上滑动元素。




$("#element").slideDown(200); // 向下滑动，时长200毫秒
$("#element").slideUp(1000); // 向上滑动，时长1000毫秒

animate()方法：这是一个强大的方法，可以用来创建自定义动画。




$("#element").animate({
  width: "200px",
  height: "100px",
  opacity: 0.5
}, 1000); // 自定义动画，时长1000毫秒

链式动画：可以使用queue()和dequeue()方法来创建一系列动画按顺序执行。




$("#element")
  .queue(function(next){
    $(this).animate({width: "50%"}, 300);
    next();
  })
  .queue(function(next){
    $(this).animate({height: "50%"}, 300);
    next();
  });

并行动画：使用Promise对象可以同时执行多个动画。




Promise.all([
  $("#element1").fadeIn(500),
  $("#element2").fadeIn(500)
]).then(function(){
  console.log("动画完成");
});

以上就是一些基本的jQuery动画方法，每种方法都有其特定的用途，可以根据需要选择合适的方法来创建动画。

- 阅读更多 -

jquery事件

System

2024-08-24

所有,jquery

在jQuery中，事件绑定通常使用$(selector).on(event, eventHandler)方法。以下是几个常见的jQuery事件的例子：

点击事件（Click Event）:




$("#button").on("click", function() {
    alert("按钮被点击了！");
});

鼠标悬停事件（Mouse Enter Event）:




$("#element").on("mouseenter", function() {
    $(this).css("color", "red");
});

输入框值改变事件（Input Event）:




$("#input").on("input", function() {
    console.log("输入框的值变为：" + $(this).val());
});

表单提交事件（Form Submit Event）:




$("#form").on("submit", function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log("表单将被提交");
});

窗口尺寸改变事件（Window Resize Event）:




$(window).on("resize", function() {
    console.log("窗口大小已改变，宽度为：" + $(window).width());
});

键盘按下事件（KeyDown Event）:




$(document).on("keydown", function(event) {
    console.log("键盘按键：" + event.key);
});

以上代码展示了如何为不同的事件绑定处理函数。在实际应用中，你可以根据需要选择合适的事件类型并编写相应的事件处理逻辑。

- 阅读更多 -