使用Webpack创建和打包一个基础网页项目的详细入门教程步骤

在使用Webpack创建项目前先下载安装配置完Node.js。安装配置Node.js下载Node.js:https://nodejs.org/zh-cn/download设置安装路径:node.js修改或自定义设置npm全局包的安装路径命令npm config set prefix 设置缓存目录:node.js设置或更改npm下载包的默认缓存目录命令npm config set cache配置环境变量:node.js node...
Web前端开发 / / 29次阅读

提取目标文件提示Office已阻止访问以下嵌入对象,以便保护你的安全的解决方法

在Office 365 Word中双击想打开嵌入的安装文件,出现“Office已阻止访问以下嵌入对象,以便保护你的安全”的提示,搜索原因是Office阻止嵌入对象访问是出于安全防护机制,主要针对可能包含恶意代码的文件类型,‌该提示常见于文档中存在高风险嵌入对象(如可执行文件、脚本)。还想打开目标文件的话,可以通过调整信任中心设置、提取文件路径或修改组策略解除限制。‌‌解决方案:通过直接提取文件路径的方式打开目标文件PS:基于Office...
电脑软件 / / 117次阅读
提取目标文件提示Office已阻止访问以下嵌入对象,以便保护你的安全的解决方法

GSAP+ScrollTrigger实现滚动到指定模块固定后滚动鼠标滑动元素

浏览器窗口向下向上滚动到指定模块后,模块固定,滚动鼠标实现该模块内的元素上下滑动。实现原理,在模块内添加一个固定显示元素和一个滑动元素,窗口滚动到它们的父元素时,一个元素固定显示,另一个元素通过滚动鼠标上下滑动。HTML代码:PS:GSAP自行下载。<!--gsap--> <script src="../js/gsap/gsap.min.js"></script> &...
Web前端开发 / / 88次阅读
GSAP+ScrollTrigger实现滚动到指定模块固定后滚动鼠标滑动元素

jQuery调用腾讯股票数据接口返回指定股票代码的股票信息

通过js调用腾讯股票数据接口,把返回的股票信息显示在自己的web网页上。调用很简单,把接口返回的数组逐一插入到web上的节点元素即可。股票接口:https://qt.gtimg.cn/q=r_hk00700港股: r_hk + 股票代码上证:sh + 股票代码深证:sz + 股票代码HTML代码:<script src="https://qt.gtimg.cn/q=r_hk00700"><...
Web前端开发 / / 113次阅读

JavaScript获取指定url的有效视频时长

对于网页上的<video></video>视频,可以通过通过监听对象的预加载元数据(loadedmetadata),然后获取视频对象的时长属性object.duration得到视频时长。如果只有一个视频url,也可以通过创建video元素,然后再监听预加载元数据。获取视频时长函数:async function getVideoDuration(url) {   ...
Web前端开发 / / 105次阅读

WebPack中生成独立CSS文件的插件mini-css-extract-plugin

Webpack处理CSS的常规方法通常是使用 style-loader 和 css-loader 把 CSS 内联到 JS 文件里,然后通过 JS 注入到页面。如果想要常规的独立 CSS 文件,就需要使用插件来提取 CSS,在 Webpack 4 及以上版本中常用 mini-css-extract-plugin,把 webpack.config.js 中的 style-loader替换为 MiniCssExtractPlugin....
Web前端开发 / / 196次阅读

打包工具WebPack的配置文件webpack.config.js的基础配置参数

WebPack 是一个现代前端开发中广泛使用的模块打包工具(Module Bundler),主要用于将多个分散的 JavaScript 文件、CSS、图片等资源“打包”成浏览器可高效加载的静态资源文件(如 .js、.css、.png 等)。新手可以暂时通俗地理解为WebPack可以把多个文件(如js文件、css文件、图片文件等)合并成一个文件(如bundle.js),这样浏览器就只需要加载bundle.js这一个资源文件,不用分别...
Web前端开发 / / 160次阅读

把全球国家列表JSON数据生成html select选项表单

留言表单有一个选择国家地区的select选项列表,一个一个手动输入显然很费劲还容易出错,使用js插件又没太大必要,直接使用在线工具生成一个国家列表的json数据,然后直接调用数据生成比较合适。 生成国家地区列表的在线工具可以用AI工具,如deepseek,下面是生成的结果: [ {"value": "AF", "label": "阿富汗"}, {"value": "AL", "label": "阿尔巴...
Web前端开发 / / 162次阅读

GSAP+Swiper+Svg实现六等分平面圆形进度条关联文本图片手动自动切换的效果

圆形使用svg代码实现,一个svg背景圆,一个svg进度条圆;进度条使用GSAP的动画操作svg的stroke-dasharray和stroke-dashoffset属性实现,实现思路是一个间隔为一个圆的周长;图片自动轮播切换使用swiper.js插件实现,因为它方法参数多,可以省去不少时间。 实现代码 插件文件: <link rel="stylesheet" type="tex...
Web前端开发 / / 156次阅读
GSAP+Swiper+Svg实现六等分平面圆形进度条关联文本图片手动自动切换的效果

GSAP ScrollSmoother怎么获取滚动的像素和判断滚动的方向

由于ScrollSmoother可能会对滚动事件进行代理或修改,因此直接使用javascript原生的滚动事件监听可能不可靠,但是ScrollSmoother插件本身也没有提供直接获取滚动方向的方法,所以需要自行编写获取代码。 通常判断滚动方向的方法是通过比较当前滚动位置和上一次的位置,如果当前值大于上一次则是向下滚动,反之则是向上。但ScrollSmoother可能会对原生的滚动行为进行封装,所以使用ScrollSm...
Web前端开发 / / 177次阅读

GSAP ScrollTrigger对多个相同class类名的元素独立应用滚动触发的动画效果

页面存在多个相同的模块,需要在滚动到各个模块的位置时独立触发该模块的动画效果,实现思路是使用 document.querySelectorAll 获取所有元素获取并通过 forEach 循环遍历元素,然后为每个元素单独创建动画和滚动触发器。 示例:为所有 .box .name 元素添加「滚动到元素时淡入」的效果 Html 代码: <div class="box"> <div cl...
Web前端开发 / / 122次阅读