Spacing JS 一个用于测量网页元素间距离的 JavaScript 小工具 作者: Chuwen 时间: 2021-12-04 分类: HTML5 评论 # Spacing JS 一个用于测量网页元素间距离的 JavaScript 小工具,用于前端开发的流程。[试试看](https://spacingjs.com/)。 > 项目地址:https://github.com/stevenlei/spacingjs ![](https://imgs.nowtime.cc/macOS/uPic/2021/12/04/1123121638588192.png) ## 如何使用 1. 在 HTML 页面中通过 ` ``` - jsDelivr CDN: ``` ``` 1. 将鼠标移动到一个元素上,然后按下 Alt 键(Windows)或 ⌥ Option 键(Mac)。 2. 将鼠标移动到其他元素上,就会显示相关的测量结果。 ## 更多选项 **同时按下 Shift 键**会延长测量结果的显示,这样我们就有足够时间进行屏幕截图。 ## 在 Vue.js 中使用 在你的模版文件,一般是在 `/public/index.html` 编辑 `/public/index.html`,添加下面代码: > 如果不是生产环境,将会加载这个 JS,然后就可以在你项目中使用 `Spaceing JS` 了。 > > 别忘记要重新运行/打包一遍 ```html <% if(process.env.NODE_ENV !== 'production'){ %> <% } %> ```
Swiper.js 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd 作者: Chuwen 时间: 2021-11-30 分类: JavaScript 评论 Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd ![Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd](https://cdn.nowtime.cc/2021/11/30/1438435762.png) 当我百思不得其解的时候,想到自己改动了 `freeMode` 参数部分,然后导致手动滑动的时候,就报出了这个错误。 原因是因为是按模块导入的,没有导入 `freeMode` 模块,只需要导入并使用即可: ```js import 'swiper/css'; import Swiper, {Autoplay, FreeMode} from 'swiper'; Swiper.use([Autoplay, FreeMode]); ```
解决 Swiper.js 无限滚动(跑马灯)手动滑动后会干扰移动效果 作者: Chuwen 时间: 2021-11-30 分类: JavaScript 评论 ### 预期效果 向左、向右滑动后,松开鼠标/手,必须按照初始移动方向移动,并且移动速度不能有太大的变化 ### 解决办法就是: 设置 `freeMode.momentumRatio` 设置的小一点,比如 `0.01` 设置 `freeMode.momentumBounce` 为 `false` 在线预览:https://codepen.io/printnow/pen/ZEXEajW ** freeMode** 参数: | 参数 | 类型 | 默认值 | 备注 | | ------------------------------------------------------------ | --------------------------- | ------ | ------------------------------------------------------------ | | [enabled](https://swiperjs.com/swiper-api#param-freeMode-enabled) | `boolean | FreeModeOptions` | 启用自由模式功能。对象的自由模式参数或布尔值为 `true` 以启用默认设置。 | | [minimumVelocity](https://swiperjs.com/swiper-api#param-freeMode-minimumVelocity) | `number` | 0.02 | 触发自由模式动量所需的最小接触移动速度 | | [momentum](https://swiperjs.com/swiper-api#param-freeMode-momentum) | `boolean` | true | 如果启用,则在释放滑块后,滑块将继续移动一段时间 | | **[momentumBounce](https://swiperjs.com/swiper-api#param-freeMode-momentumBounce)** | `boolean` | true | 如果要在自由模式下禁用动量反弹,请设置为 `false` | | [momentumBounceRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumBounceRatio) | `number` | 1 | 值越大,动量反弹效应越大 | | **[momentumRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumRatio)** | `number` | 1 | 释放滑块后,该值越大,动量距离越大 | | [momentumVelocityRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumVelocityRatio) | `number` | 1 | 释放滑块后,该值越高,动量速度越大 | | [sticky](https://swiperjs.com/swiper-api#param-freeMode-sticky) | `boolean` | false | 设置为 `true` 可在自由模式(`freeMode`)下启用捕捉幻灯片位置 | ### JS 代码: > 如果你是按照模块导入的,一定要导入 `FreeMode` 模块! ```js import 'swiper/css'; import Swiper, {Autoplay, FreeMode} from 'swiper'; Swiper.use([Autoplay, FreeMode]); let itemCount = parseInt(u('.swiper-wrapper').data('item-count')); const swiper = new Swiper("#reviews-list", { width: window.innerWidth, resistanceRatio: 0, speed: 10000, observer: true, observeParents: true, slidesPerGroup: 1, // autoplay autoplay: { delay: 0, // 每个图片移动完成后间隔 disableOnInteraction: false // 触摸后是否停止自动移动 }, freeMode: { enabled: true, momentumBounce: false,//主要是这2个参数 momentumRatio: 0.01//主要是这2个参数 }, // 不贴合 // loop loop: true, // 循环 // grid centeredSlides: true, slidesPerView: 'auto',//5 spaceBetween: 25, loopedSlides: itemCount, loopAdditionalSlides: itemCount, }); ``` #### HTML 代码例子: ```html Swiper.js 无限跑马灯 评论1 评论2 评论3 评论4 评论5 评论6 评论7 评论8 评论9 评论10 ```
使用 JPEGTRAN 生成 jpg 渐进式图片 - 在 Mac or Unix/Linux 系统安装 JPEGTRAN 作者: Chuwen 时间: 2021-11-23 分类: Linux 评论 ## 下载源码并安装 去这里找最新的源码下载地址:http://www.ijg.org/files/ 这里以 `http://www.ijg.org/files/jpegsrc.v9d.tar.gz` 为例 ```shell wget http://www.ijg.org/files/jpegsrc.v9d.tar.gz tar -xzvf jpegsrc.v9d.tar.gz cd jpeg-9d ./configure sudo make install ``` ## 查看相关命令使用说明 ```shell jpegtran -h cjpeg -h djpeg -h rdjpgcom -h wrjpgcom -h ``` ## 使用方法 ```shell jpegtran -copy none -progressive input.jpg > output.jpg ``` ## 小提示 如果出现 **Not a JPEG file: starts with 0x2d 0x2d** 提示,可以尝试使用 `convert` 命令转换 --- 本文撰写参考:https://www.phpied.com/installing-jpegtran-mac-unix-linux/
腾讯云 3 年 198 元云服务器 2核CPU、4GB内存 80GB SSD云硬盘 作者: Chuwen 时间: 2021-11-12 分类: 唠嗑闲聊 评论 确实好,3 年基本不怎么买服务器了 活动地址:https://nowtime.cc/qcloud.php ![](https://cdn.nowtime.cc/2021/11/12/2212818621.png) ![](https://cdn.nowtime.cc/2021/11/12/4227156692.png)