laokdidiao的专栏

本文转自公众号：iCSS前端趣闻。慕课网推出 CSS 架构课程，一节课解决 CSS 难复用、难维护、难扩展问题（点我）。根据CSS Scroll Snap Module Level 1[1]规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。Tips：本文截的一些 Gif 图涉及容器滚动，效果不是很好，可以点进 Demo 里实际感受下。sroll-snap-type首先看看sroll-snap-ty...

微信小程序中，懒加载特效让人头疼不已，因为小程序完全没法操作dom，所以位置的操作在小程序中，变得极其的难~~

一直以来没有特别明白canvas中的save()和restore()函数，这次终于通过微信小程序中使用此函数的时候弄明白了，以下代码可以运行在微信小程序中~~看效果：代码：const ctx = wx.createCanvasContext('canvas')ctx.save() ctx.setFillStyle('red') ctx.scale(2, 2)ctx.fillRect(10,

转载：请写明掘金原文链接及作者名 ‘小小小’ 一个潜心研究小程序QQ群：139128168 ← 点击加群 今天带来的是仿QQ消息气泡拖拽消失特效，源码中很多地方还是有很多不足，希望大家一起齐心协力，给我提出宝贵意见，咱们一起来继续完善此效果~~先看效果：原理并没有想象得那么简单，我们拆分来逐步分析~~1）实现静态效果先看效果：上图看着很头疼，就算静态，也完全没有思路，我们将填充色去掉，留下曲线，

1、Vue生命周期详解http://dapengtalk.blog.51cto.com/11549574/1880350http://www.cnblogs.com/fly_dragon/p/6220273.htmlhttps://segmentfault.com/a/1190000008010666http://www.cnblogs.com/haoyongliang/p/35c49b15

知识点1如果写了var img = new Image（100 ，100）， img.src = ‘1.png’ ，这样的作用是可以把img缓存到浏览器中，常用来做图片预加载。知识点2html代码：<img src='1.png' style="width:400px" />js代码：var imgW = document.getElementsByTagName('img')[0].style.w

CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，它具有很强大的功能，可以很轻松实现很多复杂布局。然而Flex属性较多，不便于记忆，而在项目中，布局使用频繁，那么可以将flex抽离为一个布局工具类，简化使用方式，快速应用于项目，减少记忆成本。Flex介绍Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是 Fl...

转自：原文背景狗蛋年近三十，被老母亲逼着跟隔壁村大花成亲狗蛋厌倦了种田，觉得自己的人生要自己决定于是在某大型婚恋平台上约了个妹纸狗蛋感觉有诈 ，于是叫我今晚陪他一起去面基到了约定的饭店后 我们都震惊了见到妹纸的一瞬间 我们俩全部都沦陷宇宙创世的光芒 冲击着我们的天盖骨由于狗蛋从小到大都在敲代码 没见女人狗蛋的额头冒出了豆大般的汗珠子腿就像烧柴油的马达 在...

看看我们将要介绍的slideout.js，能帮我们实现怎么样的移动端侧边栏滑动特效呢

一直以来，web移动端都有这么几个问题困扰着我：单位太多，除了px、rem，其他单位到底啥意思？ 设计师经常会问前端，我到底按照什么尺寸出设计稿？高清图怎么做出来的？边框1px，为什么在不同手机中粗细完全不同？妈蛋，为何移动端总要在meta中width=device-width, initial-scale=1…写这么一句什么是viewport？我相信我的问题也困扰着你，且听我娓娓道来

本文完整版地址已经在发表在ISUX团队官方博客：http://isux.tencent.com/half-package-web-components-for-design.html 欢迎围观，欢迎评论交流！一、传统web组件的妄想目前很多Team和团队都有自己的一套web组件体系，模块化开发，封装良好，上手简单。然后希望该web组件可以应用到接手的各个项目中，节约日后的开发成本。

20位活跃在Github上的国内技术大牛本文列举了20位在Github上非常活跃的国内大牛，看看其中是不是很多熟悉的面孔？1. lifesinger（玉伯）Github主页：        https://github.com/lifesinger微博：@        玉伯也叫射雕玉伯（王保平），淘宝前端类库 KISSY、前端模块化开发框架SeaJS、

Awesome JavaScriptJavaScript是一个仅在一周就被发明出来的小玩意， 所以，它有着有多的缺陷，即使是这样，它已经存在了20年，全世界几乎每台电脑都至少装有一个JavaScript解释器， 况且今天这个当初的小玩意的目标是编写大型的企业应用。如果你对JavaScript的理解仅限于DOM操纵，页面动画，jQuery等等， 本列表将为你展现JavaScript的更多

敬请期待。。。。。。。资料搜罗中！！！

本文讲解rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起：微信小程序官方文档 web app变革之rem rpx单位官方文档 rpx单位基础介绍如果看完上面几篇文章，我们开始进入正题吧~~一、rem的使用1） js中导入下面这段代码(function (doc, win) { var docEl = doc.documentElement, res

下拉菜单我们非常常见了，但是要在微信小程序中实现并不容易，今天带来的是仿闲鱼下拉菜单，相信对您有一定的帮助~~先看效果：麻雀虽小五脏俱全，此效果很复杂，我们将其拆分为多个步骤来分析~1）tab状态的切换先看效果：wxml代码：<view class="{{navindex == 1? 'active' : ''}}"> <view class="content">区域</view></vi

微信小程序侧边栏滑动特效~~

小程序之自定义toast

打开京东、淘宝等各大类网站，最常见的就是左侧分类菜单栏了，既然这么常见的功能，那么应该怎么去实现它呢

现在已经不是纯Android独霸天下的时代了，H5嵌入Android的Hybrid混合开发是大势所趋。今天给大家带来的就是移动端中常见的“上拉刷新，下拉加载”特效，这个特效将会基于H5来实现。先看下运行效果：是不是有点小小的‘鸡冻’ ，它就是由我们今天要介绍的主人公‘iscroll.js’实现的，接下来我以最最简便的方式教给大家~~实现步骤一、准备好iscr

网上学习资源参差不齐、分散无系统，给爱学习、努力想提高的你是不是造成很多困扰呢？ 与其他学习平台不同，CSDN知识库不是随机地、一股脑地向您推算大量文章，而是首先梳理各技术领域知识图谱，再以此为基础，收集、筛选出每个技术分支所涉及的各个技术点的解析类、动手实践类文章，内容更系统化、更有针对性。无论您正关注哪个技术领域，这里都可以找到你所需要的。（如果没找到您所需要的，欢迎向我们反馈，我们不会让您等