Webpack处理CSS的常规方法通常是使用 style-loader 和 css-loader 把 CSS 内联到 JS 文件里，然后通过 JS 注入到页面。如果想要常规的独立 CSS 文件，就需要使用插件来提取 CSS，在 Webpack 4 及以上版本中常用 mini-css-extract-plugin，把 webpack.config.js 中的 style-loader替换为 MiniCssExtractPlugin.loader。 需要注意的是 MiniCssExtractPlugin 在开发环境下可能不支持 HMR（Hot Module Replacement...
WebPack 是一个现代前端开发中广泛使用的模块打包工具（Module Bundler），主要用于将多个分散的 JavaScript 文件、CSS、图片等资源“打包”成浏览器可高效加载的静态资源文件（如 .js、.css、.png 等）。新手可以暂时通俗地理解为WebPack可以把多个文件（如js文件、css文件、图片文件等）合并成一个文件（如bundle.js），这样浏览器就只需要加载bundle.js这一个资源文件，不用分别加载js文件、css文件、图片文件等多个文件，从而实现高效加载了。 webpack.config.js文件是WebPack的配置文件，使用WebPa...
使用 powershell 运行 npm config get prefix 出现错误提示： npm : 无法加载文件 D:\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/? LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + npm config get prefix + ~~~ + CategoryInfo &nbs...
留言表单有一个选择国家地区的select选项列表，一个一个手动输入显然很费劲还容易出错，使用js插件又没太大必要，直接使用在线工具生成一个国家列表的json数据，然后直接调用数据生成比较合适。 生成国家地区列表的在线工具可以用AI工具，如deepseek，下面是生成的结果： [ {"value": "AF", "label": "阿富汗"}, {"value": "AL", "label": "阿尔巴尼亚"}, {"value": "DZ", "label": "阿尔及利亚"}, {"value": "AD", "label": "安道尔"}, ...
圆形使用svg代码实现，一个svg背景圆，一个svg进度条圆；进度条使用GSAP的动画操作svg的stroke-dasharray和stroke-dashoffset属性实现，实现思路是一个间隔为一个圆的周长；图片自动轮播切换使用swiper.js插件实现，因为它方法参数多，可以省去不少时间。 实现代码 插件文件： <link rel="stylesheet" type="text/css" href="js/swiper-bundle.css" media="screen"/> <script src="js/swipe...
由于ScrollSmoother可能会对滚动事件进行代理或修改，因此直接使用javascript原生的滚动事件监听可能不可靠，但是ScrollSmoother插件本身也没有提供直接获取滚动方向的方法，所以需要自行编写获取代码。 通常判断滚动方向的方法是通过比较当前滚动位置和上一次的位置，如果当前值大于上一次则是向下滚动，反之则是向上。但ScrollSmoother可能会对原生的滚动行为进行封装，所以使用ScrollSmoother或ScrollTrigger提供的API或方法获取滚动位置来判断滚动方向可以确保准确性。 ScrollSmoother实例有一个方法叫做...
页面存在多个相同的模块，需要在滚动到各个模块的位置时独立触发该模块的动画效果，实现思路是使用 document.querySelectorAll 获取所有元素获取并通过 forEach 循环遍历元素，然后为每个元素单独创建动画和滚动触发器。 示例：为所有 .box .name 元素添加「滚动到元素时淡入」的效果 Html 代码： <div class="box"> <div class="name">Element 1</div> </div> <div class="box"> <...
mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，类似于photoshop中的混合模式。应用场景有：图像叠加效果（如multiply正片叠底，融合.jpg图片背景颜色）、文字与背景融合（如 difference 实现高对比文字）、动态视觉设计（如 overlay 创建光效）。 样式语法： mix-blend-mod: <blend-mode> <blend-mode> 的值可以是以下几个： mix-blend-mode: normal; mix-blend-...
通过填写要扒的web网页的URL地址，点击按钮就可以自动把对应网页扒下来变为标准的html模版，并自动分好图片、css、js、以及html页面，网页扒完后会自动打开下载好的文件夹，直接鼠标双击打开模板即可在浏览器进行浏览查看。扒好的模板可以供网市场云建站、帝国CMS、织梦CMS等各大建站系统使用。 该软件为开源项目，由Java开发，源码已全部开源，支持 x64 位的系统，提供windows、linux两种系统的运行使用。 官网：http://www.templatespider.zvo.cn/ Gitee：https://g...
translate.js是一款通过AI实现i18n（国际化Internationalization），使用极其简单的网页语言自动翻译切换插件，支持中文简繁体转换、其它语言自动翻译，无需改动页面、无语言配置文件、无API Key，插件直接扫描HTML DOM并自动识别翻译显示，采用MIT开源协议，拿来即可永久免费使用。 插件扩展极其灵活、翻译能力快速、全球网络节点、源站翻译及域名分发、微调指令丰富、支持VUE项目。 使用方法： 快速使用 在网页代码末端</body>前面，加入以下代码： <script ...
随着网页滚动始终固定在侧边的客服小工具，用于显示在线咨询、联系电话、微信公众号、返回顶部等信息。HTML+CSS结合jQuery代码，可以实现鼠标悬浮或点击显示电话号码、二维码图片等。 代码效果： HTML代码： <div id="widget"> <ul> <li> <a class="pc" href="tencent://message/?Menu=yes&uin=10000&Site=https://www.tddx.net...
使用非固定像素单位开发的响应式网页，如rem、vw等，使用ctrl+鼠标滚轮缩放时网页不会缩小，因为rem、vw大多会浏览器窗口宽度分辨率绑定，而ctrl+鼠标滚轮缩小，分辨率反应变化，所以网页不会等比缩小。但可以通过js+缩放比率来实现ctrl+鼠标滚轮等比缩小的效果，适用于使用了vw单位或者rem单位。 代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationcha...