jdk137的专栏

问题描述：翻页H5，需要每次翻页时播放gif动画。gif动画不是循环的，只需播放一遍。浏览器却只会在第一次进入翻页时播放gif动画，第二次进入时停留在最后一帧。处理方案：每次进入某个页面时，删除gif元素并添加img元素，等待10毫秒后为img.src赋值。// 预加载图片 相比于让图片url带随机数的方案，不需要每次加载。对于动辄上M的gif，体验优化明显。var image = new Image();image.src = "path"; // 删除并重新创建 如果不删除元

有几种方式可以做页面的整体缩放为原来的一半div 样式 transform : scale(0.5)， 弊端： position: sticky 无法在transform过的元素里正常显示。initial-scale 0.5 弊端： iframe嵌入时有问题。html 样式 zoom: 0.5 弊端：ios不兼容没有完美的方案。但方案1弊端小， position sticky可以通过复制html 元素间接实现。方案2在不需要iframe时很好。方案3不如方案2....

发现一篇比较好的总结。DataURL与File,Blob,canvas对象之间的互相转换的Javascrip其中在blob转canvas的时候，其实还是需要详细设置参数的，特别是对于svg这种可以任意缩放的格式。首先需要确定canvas的大小，默认的canvas是300像素宽的。 需要正确设定canvas的大小。其次需要确定是否需要缩放，svg的大小不一定是canvas的大小，但是...

Html2canvas 图片模糊，可能的三种处理方法：1、修改元素的宽高像素。 如果元素及其子元素的宽高变大了，截出的图片也会更大，更清晰。特别是对图片，其清晰度和原始宽高像素值直接相关。如果把图片元素的宽高放大并设置transform scale缩小，图片的显示大小不变，但分辨率会提高。2、修改元素的transform： scale(2) 让元素放大，并让截出的图片变大。大图片自动缩小后看，...

做了个vue小项目，项目问题积累，便于本人查阅。vue项目的配置// vue.config.js// 在线配置文档： https://cli.vuejs.org/zh/config/#parallelmodule.exports = {// 选项...publicPath: './', // 相对路径，如果css里面的资源链接、ajax请求链接也是...

git地址https://github.com/jdk137/intersectionOberver在线demo // 导航条如果滚动出了页面可视区域，就在顶部固定出现导航条的浮层。 var io = new IntersectionObserver( function (entries) { entries.forEach(functi...

<marquee>是老的html中自动实现文字从左向右滚动播放的标签。新的浏览器中不一定支持了。但是可以通过css3实现https://www.quackit.com/css/codes/marquees/

https://stackoverflow.com/questions/8912917/cutting-an-image-into-pieces-through-javascriptvar image = new Image();image.onload = cutImageUp;image.src = 'myimage.png';function cutImageUp() { ...

gulp 实现简单的前端页面开发自动化。主要提供3个功能： 1. 修改后制动刷新页面。2. 压缩css。3.压缩js, 并提供sourcemap。主要流程参考：[使用 Gulp 搭建轻量级前端开发环境](https://www.ibm.com/developerworks/cn/web/wa-using-gulp-to-build-lightweight-frontend-envir...

WebGL 技术储备指南http://taobaofed.org/blog/2015/12/21/webgl-handbook/WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来与大家分享。 示例WebGL 很酷，有以下 demos 为证： ...

转载来源：http://www.hangge.com/blog/cache/detail_1808.html1，基本介绍（1）在 Three.js 中，使用 THREE.Color 对象来表示颜色。（2）在构造 Color 对象时，可以使用十六进制字符串（"#c0c0c0"）或者十六进制值（0xc0c0c0）来指定颜色，还可以使用 RGB 颜色值（0.3,0.5,0.6）。...

Three.js - 光源使用详解（环境光 AmbientLight、点光源 PointLint、聚光灯 SpotLight、平行光 DirectionLight、环境光 HemisphereLight、镜头光晕 LensFlare）转载来源：http://www.hangge.com/blog/cache/detail_1810.htmlhttp://www.hangge.com/b...

http://www.css88.com/archives/4648上周写了window resize和scroll事件的基本优化，结果微博上交流的人还挺多，大家都提到了一个技术名词：“throttle”。throttle我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器，是连续执行时间间隔控制。主要应用的场景比如

基于position: sticky 以及 enter-view 库，可以实现非常简单的scrollytelling.原文地址： https://github.com/the-pudding/blog_scrollytelling-stickyEasier scrollytelling with position stickyWe’ve written a lot about scrollytel...

浮层为position: fixed, 滑动浮层时，后面的整体网页也会滑动。为了禁止后面网页的滑动， 需要这么设置：[安卓]https://uedsky.com/2016-06/mobile-modal-scroll//** * ModalHelper helpers resolve the modal scrolling issue on mobile devices * https:/...

太棒了，特别是滤镜的部分。https://www.oxxostudio.tw/articles/201410/svg-tutorial.html svgedit https://svg-edit.github.io/svgedit/releases/latest/editor/svg-editor.htmlhttps://github.com/SVG-Edit/svgedit...

var head = document.getElementsByTagName('head')[0];var script = document.createElement('script');script.type = 'text/javascript';script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/...

php:  https://github.com/softius/php-cross-domain-proxy&lt;?php/** * AJAX Cross Domain (PHP) Proxy 0.8 * Copyright (C) 2016 Iacovos Constantinou (https://github.com/softius) * * This program ...

1. 用Three.js创建你的第一个三维场景1.1 具有所有基本元素的hello world示例src/chapter-01/06-screen-size-change.html2. 使用构建Three.js场景的基本组件2.1 添加、删除、枚举、通过名字获取场景中的对象src/chapter-02/01-basic-scene.html2.2 雾化效果src/chapter-02...

新版本的浏览器中， 因为安全原因，js不能关闭非js打开的页面。比如如果是手动输入url打开的页面，js就没有权限关闭这个页面。但是可以通过chrome插件来实现这个目的。不过应用场景就仅限于安装了插件的浏览器。通常适合本地演示的时候使用。示例源码下载：https://github.com/jdk137/learningChromeExtension/tree/master/src/w...

sae java环境太复杂， 对新手太不友好，还是用php或python.当前用了 一个python flask的模板，解决了微信开发接口链接问题。mysql 不能了链接报错是因为没有启动sae mysql 服务。微信接口明文即可。模板示例：http://blog.youkuaiyun.com/linhan8/article/details/8746110