小码农 – html

小码农小码农

小码农

wordpress,laravel和前端知识学习

利用fs遍历图片,使用tinify压缩

文章摘要:

gulp前端自动化中有压缩图片的工具gulp-imagemin等,但是压缩效果并不很理想,之前发现的tinypng.com网站提供许多压缩接口(puby,java,python,php,nodejs等)和插件(photo,wordpress等),当然这个是付费的.免费配额为500张图片/每月。个人觉得轻度使用是足够的。 1. 官方站点提供了常规调用方法 安装: npm install --save tinify 调用: var tinify = require('tinify'); tinify.key='your key '; 这个是提供邮箱即可获得秘钥,在此我就不贴出来了,秘钥链接:https://tinypng.com/developers 收到邮件后,点击即可获取(可能在垃圾邮件中) 压缩操作: var source = tinify.fromFile("unoptimized.jpg"); source.toFile("optimized.jpg"); 2. 利用fs获得文件数......

雪碧图自动缩放处理

文章摘要:

前端经常会用到雪碧图来合并一些细碎的图片资源,减小http请求次数,以加快页面加载. 最近遇到如果页面需求更改或者同一雪碧图的某个资源在不同地方引用,切尺寸不同,是否需要两个雪碧图?当然是不需要的.利用background-size属性对图片资源进行缩放即可,同样的background-position也需要使用%百分比来定位. 例如: background: url(img/img3.png) no-repeat; background-size: 300%; background-position: 50% 100%; 详细理解请补充background相关知识.

WOW动画使用及常用动画

文章摘要:

1. 调用wow 1. 引入文件     <link href="animate.css" rel="stylesheet" type="text/css"/>     <script src="wow.js"></script> 2. 添加class及标签属性     <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">Conetnt</div> 属性: 属性名 含义 data-wow-duration 动画执行时间 data-wow-delay 动画延迟执行时间 data-wow-offset 元素的位置露出后距离底部多少像素执行 data-wow-iteration 动画执行次数 class: 类名 含义 wow 动画执行的必须函数,可在js中自定义 rollIn 从左......

jquery动态添加append()之后事件及样式失效

文章摘要:

#jQuery动态添加节点后,动作失效 jQuery给大家带来很大的方便来操作DOM,当jQuery动态添加节点时,原有的事件将会失效,无法触发. 例如: $li = $('ul li:first-child').remove(); $('ul').append($li); 原事件绑定为: $('li').on('mouserenter',function(){    $(this).find('div').animate({       'opacity':'0.8'    },500);  }); 在动态截取添加后,虽然使用了on函数,但是并没有使用on函数的事件委托,导致事件仍然不能触发,因此,将on函数更改如下: $('ul').on('mouserenter','li',function(){    $(this).find('div').animate({  ......

使用AngularJS创建Todos工具

文章摘要:

使用AngularJS创建Todos工具,并利用HTML5的新特性localStorage本地存储数据