- 博客(121)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 《Three.js 开发指南》源码示例说明以及在线demo（原书第二版）附第三版的代码下载
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...
2018-12-10 17:38:24
3960
原创 clip-path 相关的的动画资料汇总
https://css-tricks.com/svg-line-animation-works/https://css-tricks.com/clipping-masking-css/https://css-tricks.com/animating-with-clip-path/要注意兼容性
2020-12-14 16:03:51
168
原创 圆环增长动画的两种实现
问题描述： 实现圆环从0度逐渐增长，变成360度（或者某个百分比代表的度数）的动画。实现方案1、d3 js实现 兼容性好var $svg = $con.find('svg').width(width).height(height);var svg = d3.select($svg[0]) .attr('width', width) .attr('height', height);var imgW = 290 * 2;var imgH = 290 * 2;var arcF =.
2020-12-14 15:55:06
277
原创 twitter,facebook 分享网页样式定制 以及 调试
Twitter 分享可以在文件头中设置各种网页分享样式，主要有summary 和 summary_large_image等如果设置有问题，可以在这些页面中测试，或者清理之前的缓存。Twitter 分享 验证https://cards-dev.twitter.com/validatorFacebook 分享验证https://developers.facebook.com/tools/debug/...
2020-12-14 15:31:34
602
原创 移动端页面手势滑动
https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-androiddocument.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false);var x
2020-12-14 15:25:02
157
原创 gif动画可控制播放
问题描述：翻页H5，需要每次翻页时播放gif动画。gif动画不是循环的，只需播放一遍。浏览器却只会在第一次进入翻页时播放gif动画，第二次进入时停留在最后一帧。处理方案：每次进入某个页面时，删除gif元素并添加img元素，等待10毫秒后为img.src赋值。// 预加载图片 相比于让图片url带随机数的方案，不需要每次加载。对于动辄上M的gif，体验优化明显。var image = new Image();image.src = "path"; // 删除并重新创建 如果不删除元
2020-12-14 15:19:38
577
原创 arts_004
一、Algorithm二、Review创建新冠疫情可视化时需要考虑的10件事深入了解数据数据容易获取，并不代表使用容易。数据可以做计算，并不代表必须要做。对不同地区的数据做预测和比较时，要小心其他因素。对没有显示的数据保持诚实。谨慎对待专家和公共机构给出的预测数据，尤其是预测模型很复杂的时候。谨慎对待数据科学家和统计学家给出的预测数据。最好使用领域专家和公共机构的结论。设计要周全。9. 作品应该考虑人性的一面。比如疫情重灾区的人看到后的感受。10. 考虑作品的社会责任。三、t
2020-06-29 07:57:32
210
原创 viewport initial-scale，zoom 兼容性探索
有几种方式可以做页面的整体缩放为原来的一半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....
2020-06-22 10:39:06
384
原创 老IE兼容tips
js判断ie版本 isIE() { var ua = window.navigator.userAgent; // Test values; Uncomment to check result … // IE 10 // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)'; // IE 11 // ua = 'Mozilla/.
2020-06-22 10:28:23
167
原创 arts003
Algorithm:Review:Data speak decoder: 如果你想让自己的数据更可信，需要注意一下我们常用词语的含义。每个词语其实都有它特定的含义，不能为了逼格而滥用，否则会让数据变得不可信。https://weallcount.com/tools/data-speak-decoder/需要了解术语的含义：Anonymized , bias有多重术语的含义： Error, Impact尽量避免使用的术语： Big Data, Normal, Sig...
2020-06-22 08:30:54
136
原创 d3地图浮框
d3地图浮框。中国地图鼠标滑动到每一个省的时候，都能显示出一个省的浮框。浮框的内容可以设置，位置跟随鼠标移动。 function getFloatTag(node) { var $floatTagContainer = $(node); var FloatTagFactory = function() { var mouseToFloatTag = { x: 20, y: 20 }; var setContent = function() {
2020-06-22 07:45:42
343
原创 Arts打卡002
Algorithm: LeetcodeReview: 地图配色最佳cheat sheet。https://gistbok.ucgis.org/bok-topics/2019-quarter-02/statistical-mapping-enumeration-normalization-classification ucgis上发了一篇论文。描述了常用的几种配色方案。简单介绍一下9种方案的意思： Euqal Interval: 等值分割。按最大最小值确定的范围来...
2020-06-08 09:01:36
214
原创 ARTS打卡001
一、Algorithm:Leetcode二、Review： 不同时间线的对比分析主要结论是线形和周期性时间线的对比。线性的时间线简单直观，查找信息方便，容易为读者接受，但是也比较乏味。周期性时间线相对复杂，查找信息不方便，读者可能会困惑，但是较新颖有趣，且能体现周期信息。三、Tips:纯css实现文字跑马灯Marquee, 兼容各种长度的文字四、Share: Andy Kirk 开始了Explore Explain 系列，邀请了世界著名媒体的数据可视化开发人员介绍他们的心得。非常值得学习
2020-06-01 00:16:43
155
原创 js 灰度图转成白色透明图
网上需要一些星光的图片，但是下载下来是这个黑白图。需要转化成透明背景的白色星光图。codepen在线示例原图：效果图：<!DOCTYPE html><html><head> <style> body { background: red; } canvas { display: inline-block;
2020-05-19 15:59:21
35979
原创 svg 各种渐变收集
一、基础的线性渐变和放射性渐变线性渐变 菜鸟教程示例放射性渐变 菜鸟教程示例<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> <...
2020-04-29 17:12:57
181
原创 一些在线图片处理工具收集
图片压缩https://tinypng.com/png图片缩放https://www.iloveimg.com/zh-cn/resize-image/resize-pngsvg图片缩放https://www.iloveimg.com/resize-image/resize-svg大图切小图http://www.zuohaotu.com/cut-imag...
2020-04-29 12:09:40
422
原创 svg如何转canvas
发现一篇比较好的总结。DataURL与File,Blob,canvas对象之间的互相转换的Javascrip其中在blob转canvas的时候，其实还是需要详细设置参数的，特别是对于svg这种可以任意缩放的格式。首先需要确定canvas的大小，默认的canvas是300像素宽的。 需要正确设定canvas的大小。其次需要确定是否需要缩放，svg的大小不一定是canvas的大小，但是...
2020-04-26 09:37:20
3604
1
原创 html2canvas 图片模糊研究及规避方法
Html2canvas 图片模糊，可能的三种处理方法：1、修改元素的宽高像素。 如果元素及其子元素的宽高变大了，截出的图片也会更大，更清晰。特别是对图片，其清晰度和原始宽高像素值直接相关。如果把图片元素的宽高放大并设置transform scale缩小，图片的显示大小不变，但分辨率会提高。2、修改元素的transform： scale(2) 让元素放大，并让截出的图片变大。大图片自动缩小后看，...
2020-04-22 20:46:35
4963
原创 vue项目小积累
做了个vue小项目，项目问题积累，便于本人查阅。vue项目的配置// vue.config.js// 在线配置文档： https://cli.vuejs.org/zh/config/#parallelmodule.exports = {// 选项...publicPath: './', // 相对路径，如果css里面的资源链接、ajax请求链接也是...
2020-04-21 21:26:38
317
原创 d3 开发小技巧汇总
旋转后找不到元素？ 那是因为旋转的原点是0，0。 需要旋转rotate(90), 缩放scale(-1) 的地方，都先把元素的位置设为0， 然后再通过设置transform的值去实现。 attr(’transform’, ’translate(‘ +x + ‘,’ + y + ‘) scale(-1, 2) rotate(90)’)如何调整地图长宽比？ 链接...
2020-04-09 12:01:40
191
原创 d3绘制动态迁徙线
/*生成迁徙线*/ renderLine(startA,endA,index){ let that=this; let oG=this.oG; //获取贝塞尔曲线控制点 function computeControlPoint(ps, pe, arc = 0.5)...
2020-04-09 11:50:09
459
原创 d3 地图长宽比调整
D3 geo project 的各种投影方法没有参数来设置长宽比，需要修改源码。但是可以通过后期的微调来实现。比如这个投影方式：var projection = d3.geoEquirectangular() .center([0, 0]) .rotate([0, 0]) .scale(240) .translate([this.width / 2, this.heig...
2020-04-07 18:45:41
657
1
原创 JDK的可视化分享（第16期） 20200216
一、可视化示例1、Food Maphttp://goodcitylife.org/food/Home Projects Happy Maps Smelly Maps info map Chatty Maps info map Food & Health info map UrbanOpticon Facelift Six Hacks Jacobs Maps Wo...
2020-02-16 18:30:08
821
原创 [转载]如何【系统性学习】——从“媒介形态”聊到“DIKW 模型”
转载自https://program-think.blogspot.com/2019/10/Systematic-Learning.html文章目录★何为“系统性学习”？★【媒介形态】的选择★三种类型的读物：通俗性、入门性、专题性★如何选择书籍？★【费曼学习法】的应用★入门之后，如何在【不同分支】安排你的时间与精力？★DIKW 模型（Data Informati...
2020-02-16 18:04:41
1264
原创 intersectionObserver示例
git地址https://github.com/jdk137/intersectionOberver在线demo // 导航条如果滚动出了页面可视区域，就在顶部固定出现导航条的浮层。 var io = new IntersectionObserver( function (entries) { entries.forEach(functi...
2020-02-02 14:59:08
436
原创 纯css实现文字跑马灯Marquee, 兼容各种长度的文字
<marquee>是老的html中自动实现文字从左向右滚动播放的标签。新的浏览器中不一定支持了。但是可以通过css3实现https://www.quackit.com/css/codes/marquees/
2020-02-02 11:20:11
1766
2
原创 html2canvas 引入跨域图片时报错, base64 报错。
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.https://github.com/niklasvh/html2canvas/issues/1614朋友圈h5需要动态生成一些长按分享的图片， 用html2canvas最合适不过。但是经常会报错。...
2020-01-14 16:26:04
901
原创 网页点击复制文本 javascript 代码， 兼容ios
var text = '需要复制的文本'; // ios 下要求更严格， https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios function iosCopyToClipboard(el) { var oldContentEd...
2020-01-14 16:03:21
185
原创 H5 信息图自动制作网站汇总
五大微信运营免费H5制作工具，你值得拥有！微信运营过程中总避免不了要去制作H5，但是对于 那些不会PS的运营小白来说这就成了一大难题，那么今天福利来了，贵阳网络营销送你五大微信运营免费H5制作工具，话不多说，直接开始！ 推荐工具：易企秀推荐网https://zhuanlan.zhihu.com/p/29425648H5制作哪家强？四大H5制作网站大PK作为一个一线...
2019-11-06 19:00:06
297
原创 JDK的可视化分享（第15期） 20191031
一、可视化10 significant visualisation developments: January to June 2019 - Visualising Data 2019上半年最佳合集https://www.visualisingdata.com/2019/08/10-significant-visualisation-developments-january-to-...
2019-10-31 11:12:11
278
原创 一些css动画特效
1. 通过css实现一个物体从部分显示到完整显示的动画。Animating with clip pathhttps://css-tricks.com/animating-with-clip-path/#education.swiper-slide-active .eduAnim {animation: eduAnim 1s linear infinite;}/* ht...
2019-08-07 17:37:09
601
原创 JDK的可视化分享（第14期） 20190723
一、可视化1、Mapped: The Territorial Evolution of the U.S. 美国领土变迁https://www.visualcapitalist.com/us-territorial-expansion/From the Thirteen Colonies to present-day USA, this animation is a deta...
2019-07-23 16:00:06
363
原创 JDK的可视化分享（第13期） 20190705
一、可视化1、Why EU Regions are Redrawing Their Borders 清楚说明了为何有些欧盟某些区域要调整边界。https://pudding.cool/2019/04/eu-regions/The EU dedicates a third of its budget to less economically developed regions for...
2019-07-05 15:03:28
544
原创 设计理论相关资料收集
Fundamental design principles for non-designers 非设计师可以参考的设计原则https://www.freecodecamp.org/news/fundamental-design-principles-for-non-designers-ad34c30caa7/by Anna 4erepawko Mészáros Fundamental d...
2019-07-05 14:05:50
129
原创 前端滤镜相关资源收集
FDCon2019大会分享之滤镜与混合模式实录 « 张鑫旭-鑫空间-鑫生活https://www.zhangxinxu.com/wordpress/2019/06/fdcon2019-css-share/FDCon2019大会分享之滤镜与混合模式实录 第4届中国前端开发者千人峰会上我做了名为“滤镜与混合模式”主题分享，这里我把分享内容，尤其一些案例和源码整理成文，给需要的人，末尾有分享...
2019-07-05 11:57:33
175
原创 缓动函数相关资源收集
1、Easing Functions Cheat Sheethttps://easings.net/Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not...
2019-07-05 11:48:48
149
原创 简单的sankey图组件
sankeySimpleA simple sankey data visualization base on d3’s sankey.js. Two dimensions only.github地址：https://github.com/jdk137/sankeySimpleRequirements:d3.jssankey.jsFeatures:Two dimension s...
2019-07-04 12:59:39
1245
原创 gulp 简单框架
gulp 实现简单的前端页面开发自动化。主要提供3个功能： 1. 修改后制动刷新页面。2. 压缩css。3.压缩js, 并提供sourcemap。主要流程参考：[使用 Gulp 搭建轻量级前端开发环境](https://www.ibm.com/developerworks/cn/web/wa-using-gulp-to-build-lightweight-frontend-envir...
2019-07-02 11:49:11
355
原创 js 分割合并图片
https://stackoverflow.com/questions/8912917/cutting-an-image-into-pieces-through-javascriptvar image = new Image();image.onload = cutImageUp;image.src = 'myimage.png';function cutImageUp() { ...
2019-06-24 15:32:20
4713
2008年9月全国计算机等级考试四级软件测试工程师笔试试卷（选择题部分）.doc
2010-03-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人