若川的个人主页 - 赞过 - web秀

若川

每周一起学200行左右的源码共读活动，加微信 ruochuan02 参与

6年前

jquery如何模拟分页-小白进阶

jquery如何模拟分页-小白进阶

下面注释很详细，这里就不做过多的介绍了html容器<divid="docList"></div><divclass="more"id="docLoadMore">加载更多</div>js逻辑处理vardata={//分页数据docPages:{pageNo:1,//当前页码pageSize:3//一页多少条数据},//模拟数据docList:[{name:'这是我的第1篇文章'},{name:'这是我的第2篇文章'},{name:'这是我的第3篇文章'},{

559754 3241 0

5年前

JavaScript时间轮盘：js元素圆形布局制作时间轮盘动画

JavaScript时间轮盘：js元素圆形布局制作时间轮盘动画

前言前段时间看抖音，有人用时间轮盘作为动态的桌面壁纸，感觉很好玩，于是突发奇想，可以用JS来实现这个功能。来来来，先看看成果这个效果实现起来其实只有1个难点（其他都不是事），难点就是：元素圆形布局。效果示意图居然是圆，那我们肯定要知道圆心，和半径了，这样才能确定一个圆。先看看上面这个效果图解析：1、圆心：O点、半径r;2、圆心角：∠BOM;3、需要布局的元素：A、B、C、D、E、F、G、H绝对定位的DIV元素;4、DIV绝对定位时的元素的坐标点，可以用left值和top值根据上图，我们知道圆心坐标，半径r

560386 3744 0

5年前

人脸识别JavaScript也可以轻松搞定

人脸识别JavaScript也可以轻松搞定

前言是不是觉得不可思议，js已经强大到这个地步？是的，js日新月异，它在不断的进步。只要稍不留神，那我们都只能望尘莫及了。今天我们就来看看是什么js插件可以如此厉害？tracking.jstracking.js库将不同的计算机视觉算法和技术引入浏览器环境。通过使用现代HTML5规范，能够进行实时颜色跟踪、人脸检测等等。而这些牛逼的功能，仅仅只有7kb大小。tracking.js文档地址tracking.js示例地址人脸识别示例<scriptsrc="./tracking-min.js"><

561104 3770 0

5年前

CSS3实现瀑布流布局(display: flex/column-count/display: grid)

CSS3实现瀑布流布局(display: flex/column-count/display: grid)

前言在css3到来之前，都是用js来操作dom元素，计算位置，大小，形成瀑布流布局。但是有了css3之后，一切实现起来就太简单了，没有复杂的逻辑，轻松的几行样式代码就可以搞定。回顾以前（js瀑布流）基于waterfall.js（11.8kb）,还得写入基础的样式，初始化等等，对比其他js，已经是很简单了。varwaterfall=newWaterFall({container:'#waterfall',pins:".pin",loader:'#loader',gapHeight:20,gapWidth:2

562810 4375 0

5年前

CSS3动画解析抖音 LOGO制作

CSS3动画解析抖音 LOGO制作

前言“字节跳动”现今也是如日中天，旗下产品，除头条外，还有短视频平台“抖音”，人气也是非常高，据说拥有7亿用户。今天我们就来研究研究抖音的logo，蹭蹭热度。效果预览：主要用css3新增属性mix-blend-mode，混合模式来实现。分解我们先来看看它的组成，由大写的“J”组成，然后有3种颜色，白色、红色、和天蓝色。ok，我们先来完成一个“J”。根据以往的经验，我们把它拆分成3部分。下面我们来分步骤实现。完成单个“J”<divclass="jitter"><divclass="logo

563408 6284 0

6年前

CSS利用mask 实现图片的斜线拼接

CSS利用mask 实现图片的斜线拼接

什么是斜线拼接效果图下面所示：发现，上面这张图是两个美女拼接在一起的，看中间的斜线。但是呢，刚接到这个需求的时候，开发是抓狂的——第一反应就是用canvas画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨JS，O__O"…不过依稀记得，CSS貌似有个遮罩的特性，可以实现图片的部分显示的效果的。CSSmask&lineargradient要实现这个特性，就需要用到CSS遮罩和线性渐变。至于这两个是什么东西，我就不班门弄斧的介绍了，毕竟这两个属性出生也挺久了的，不了解的筒子可以看这两篇文章CS

562788 6366 0

猜你喜欢

换一换

最新文章