uniapp点击元素滚动到指定模块的实现代码
点击元素页面自动滚动到指定ID模块是一个网站常见的效果，在uniapp开发的时候需要实现这个效果，实现思路跟web网页实现代码是一致的：获取指定ID模块距离顶部的距离，再通过指定方法滚动到这个距离的像素（如uni.pageScrollTo）。PS：uni.pageScrollTo的核心作用是让页面滚动到指定的目标位置。view代码：<view class="custom-navbar">
&n...
Javascript滚动页面获取当前视窗模块的锚点的代码
常用的功能，当前页面模块锚点菜单固定跟随，当窗口滚动到某个模块时，当前锚点菜单高亮显示。思路是先获取每个模块距离顶部的大小，存到一个数组里，滚动的时候获取滚动的距离，再遍历数组对比当前滚动距离的值，如果大于滚动距离的值，就是当前锚点。或者每滚动一次，就遍历获取各锚点模块距离顶部的大小一次，再进行对比，但感觉这样性能会差很多，推荐前者。HTML代码：<div id="wrapper">
&nbs...
苹果手机浏览器不支持自动触发window.open()方法的解决方案
由于苹果手机浏览器为了防止恶意网站通过各种跳转方式打开其它网站的安全机制，会拦截一些代码自动触发而不是由用户直接交互触发的方法，比如window.open()、超链接a标签等，最常见的是在异步请求的回调函数中执行window.open()跳转会被苹果浏览器认为是非用户交互执行的操作被拦截，如果你在点击某个元素进行AJAX异步调用并成功返回结果后window.open()没有跳转，多半是被拦截了。一般的解决方法是使用location.hr...
Swiper.js轮播插件实现手机端横向滑动菜单效果
网页菜单左右横向滑动是手机端最常见的菜单布局效果，简单的左右滑动一般可以直接通过css样式overflow-x:scroll;（或auto自适应显示滚动）结合jQuery的scrollLeft()方法实现，但想要扩展性强一点，通过Swiper.js轮播插件实现会更好，而且个人感觉更丝滑。效果如下：效果基于Swiper 8.4.7版本，可自行前往官网下载：https://swiperjs.com/HTML代码：<link ...
GSAP ScrollSmoother插件内容区域不支持position:fixed样式属性的替代方案
GSAP的ScrollSmoother插件通过不断更新ScrollSmoother的Content元素translateY值来替换浏览器自身的页面滚动来实现平滑滚动，但这会导致内容区域里的元素使用position:fixed;样式失效。常规的解决方法是把使用了position:fixed;样式的元素放置在ScrollSmoother的wrapper元素外观，但如果有非要把position:fixed;样式元素放置在ScrollSmoot...
最常用的web html前端切换多语言网站的下拉菜单样式
有多个不同语言的网站，在右上角添加各语言网站的入口，最常用的前端样式就是下拉菜单。效果如下：HTML代码：<div id="language">
<span>中文</span>
<ul>
...
使用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...
GSAP+ScrollTrigger实现滚动到指定模块固定后滚动鼠标滑动元素
浏览器窗口向下向上滚动到指定模块后，模块固定，滚动鼠标实现该模块内的元素上下滑动。实现原理，在模块内添加一个固定显示元素和一个滑动元素，窗口滚动到它们的父元素时，一个元素固定显示，另一个元素通过滚动鼠标上下滑动。HTML代码：PS：GSAP自行下载。<!--gsap-->
<script src="../js/gsap/gsap.min.js"></script>
&...
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"><...
JavaScript获取指定url的有效视频时长
对于网页上的<video></video>视频，可以通过通过监听对象的预加载元数据（loadedmetadata），然后获取视频对象的时长属性object.duration得到视频时长。如果只有一个视频url，也可以通过创建video元素，然后再监听预加载元数据。获取视频时长函数：async function getVideoDuration(url) {
...
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....
打包工具WebPack的配置文件webpack.config.js的基础配置参数
WebPack 是一个现代前端开发中广泛使用的模块打包工具（Module Bundler），主要用于将多个分散的 JavaScript 文件、CSS、图片等资源“打包”成浏览器可高效加载的静态资源文件（如 .js、.css、.png 等）。新手可以暂时通俗地理解为WebPack可以把多个文件（如js文件、css文件、图片文件等）合并成一个文件（如bundle.js），这样浏览器就只需要加载bundle.js这一个资源文件，不用分别...
