JavaScript实现数字动态变化效果

我在手机上使用挖财记账 APP,左右滑动页面时首屏上的三个数字都会同时做动态滚动,从零渐增到当前数字,整个动画效果大概在 500ms 内完成,三个数字同时结束滚动。尝试用JS实现这个效果。 下面是效果演示: .numbers{font-family:Helvetica, Arial, sans-serif;font-size: 36px;} .numbers{display: inline-block;padding-right:25px;border-right:1px solid gray;margin-right: 25px;width: 145px;} #num2{border: none;}#btn{font-size:36px;margin-top:20px;} 56690.3512345.

解决 Ghost 博文内嵌 JS 代码中全等号 === 引起的错误

在 Ghost 中编辑文章,如果用到如下内嵌 js 脚本: <script> var num = 0; if(num === 0) { console.log(num) }else if(num === 1){ alert(num) } </script> 我们当然是希望他按规矩打印出 num。但 Ghost 在将编辑器中内容转成 html 时上面 js 被干扰成这个鬼东西,还会引起报错。 <script> var num = 0;

原生 JavaScript 图片裁剪效果

图片裁剪程序效果如下,可鼠标操作。 *{margin: 0;padding: 0;} #wrap{width: 1280px;margin: 20px auto;position: relative;} #cArea{position: relative;overflow: hidden;width: 600px;height: 390px;} .baseImg{position: absolute;top: 0;left: 0;opacity: .3;} .clipImg{position: absolute;top: 0;left: 0;clip:

另一种Ghost添加代码高亮方式

前面介绍了用Prism给Ghost添加代码高亮,prism.js代码高亮的原理是用JS分析页面html源码,找到代码片段后通过class类识别出语言,然后根据语法在代码片段中插入标签,结合引用的CSS样式实现高亮。这种方案操作起来简单粗暴,在页面挂上css和js文件就可实现高亮。代码高亮对网站来说不是刚需,仅仅为了实现这个功能就外挂两个引用文件不划算。 我们在Ghost后台用Markdown书写内容,然后Ghost将markdown转为html。如果在markdown转为html这个过程中调用prism.js处理代码片段,那生成页面只需有CSS样式就可实现高亮,不用引用JS文件。 下面以本站为例,记录实现过程。 准备Prism 在服务器上进入Ghost安装目录,安装prism cd /srv/www/denpe.com npm install prismjs 安装成功后node_modules文件夹下会出现prismjs目录。理论上这样安装完事就可以支持所有语言代码高亮,我对node不熟,没折腾出来,默认只支持几个语言。好在可以从Prism官网下载支持所有语言的JS文件(200K左右),用他替换/srv/www/

学习原生JS延时加载

优化网站速度时接触到延时加载这个概念,本文以图片延时加载为例作学习总结。 延时加载概念和原理 正常网页页面结构:头部CSS样式和少量JS;中间部分是内容,包括图片、视频、文本等;底部主要JS文件。浏览器打开网页时这些资源按顺序从前到后逐一加载。而大多页面都无法一屏显示完全,如果初次打开页面时让浏览器只加载可视区域的图片,不加载当前不可见图片,就可以把下载看不见图片的时间用来下载页面后面的js等内容,大大提高页面访问速度。当鼠标像下滚动浏览器时,再按需加载出现在可视区的图片。 图片延时加载的实现 <img src="/loading.gif" data-src="/images/001.png"> 初始状态下让图片的默认src为空或者指向一个小尺寸图片,设置data-src属性存储图片真实路径。需要显示图片时用data-src属性值替换掉默认的src值。下图详解了如何判断何时加载图片。 1. 浏览器可视区域高度H,通常是固定的(这里不考虑手动调整窗口大小)window.innerHeight可取得此值。 2.