笔试题目来自芋头君的知乎live,他在live中要求题目不要公开,但是有几个人这么注重知识版权并信守诺言呢,何况我还是拿来无偿分享和造福前端开发者。 继续阅读“小芋头君的前端笔试题”
分类: 编程作品
通过代码去表达自己的情感
刷票入门
这篇文章真的有很多人看吗?帮忙留言一下。
在微信有很多的投票活动,一般这种投票活动都是可以靠“刷”增量的,而且你可以看到那些票数高到离谱但是并不好玩的投票活动,里面肯定是掺杂着刷票行为的,对于技术大神可能轻易就能搞定(12306他们都能搞定),对我这种小菜鸟还是花了不少时间问了不少人才有一点眉目的。 继续阅读“刷票入门”
Marquee Jquery Plugin
最近要做一个跑马灯效果,踩了不少的坑,想写出来,但是没有代码又无从说起。所以程序员跟人聊天的基础是代码,而诗人、音乐家、作家的产物都是大众化的,受众更多,更容易被大众欣赏接纳。
而程序员踩的坑过多往往会暴露自己的实力不足,实在不是好事。 继续阅读“Marquee Jquery Plugin”
通过script标签实现一个spa网站
什么是spa?
spa是放松保养疗法,中文也称水疗,然而比较偏向专业美容结合休闲而没有医学上的治疗意义,因此和某些烧烫伤患者在医院接受的水疗并不同。
wp_enqueue_style和wp_enqueue_script
Mobile_Detect.php
毕业设计的网页之前一直没有考虑到在移动端的显示效果,还得再做一套网站去适配移动端。
Mobile_Detect.php是一个检测移动设备的php库,开源作者还进行单元测试和定期调查,看起来很用心。
第七章—分支
如果你想给你的项目创建多个版本怎么办呢,虽然创建多个版本的原因可能是因为你的项目突然产生了一个非常严重的bug、你参加的开源项目不能满足你的意愿、甚至你就想留一些早期的代码作为后期的怀念。
使用git里面的branch概念就可以做到这一点。 最重要的一点是,你在开发一个非常牛逼的项目。
但是一个牛逼的程序员是不能满足现有的牛逼的,所以开一个2.0分支去远征,让稳定的1.0版本继续使用。所以怎么能不去使用分支!
我们经常使用git pull origin master命令,作为新手可能没有去想这个master是什么意思,其实master就是主分支的意思,这就导致了你不能再创建一个叫master的分支除非你删除主分支。同时,这个命令也可以使用git pull 命令来替代,因为会默认获取master分支的代码。 程序员一定要懒,只有懒才能写出更好的代码。
如果你对一个程序员说,你真是太勤奋了,我想这不是最好的赞词。 推荐的命名法则是使用层级式的,比如bug/pr-1023,这样的好处是,git像shell脚本一样支持通配符查找。你可以使用git show-branch ‘bug/*’找到和bug相关的分支。 创建分支 git branch branch_name命令可以创建一个分支,处在最新的commit。
这个命令的完整形式是git branch branch_name [starting-commit],这意味着你可以从过往的位置开创新的分支。
imagesLoaded.js
Parallax.js
简介
比较粗俗地讲,parallax.js是根据你的鼠标或者是移动设备的摇晃让元素做出反应的视差库。可以查看demo。
简单使用
<ul id="scene"> <li class="layer" data-depth="0.00"><img src="layer1.png"></li> <li class="layer" data-depth="0.20"><img src="layer2.png"></li> <li class="layer" data-depth="0.40"><img src="layer3.png"></li> <li class="layer" data-depth="0.60"><img src="layer4.png"></li> <li class="layer" data-depth="0.80"><img src="layer5.png"></li> <li class="layer" data-depth="1.00"><img src="layer6.png"></li> </ul>
简单使用的代码的结构大概是这个样子,记得加名为layer的class,data-depth的推荐值为0至1,不过你要填入100或者-100,也没有什么关系,只是会动得特别快,像幽灵一样。
然后加上这样的js代码:
var scene = document.getElementById('scene'); var parallax = new Parallax(scene);
移动的速度是怎样确定的
有个公式:
xMotion = parentElement.width * (scalarX / 100) * layerDepth yMotion = parentElement.height * (scalarY / 100) * layerDepth
parentElement.width就是父元素的宽度,也就是id为scene的宽度,layerDepth就是设置的data-depth的值,scalarX和scalarY就是可以设置的参数,给你移动的距离有了可以设置的灵活性,数值越大,移动范围越大,默认值都是10.
其它配置
<ul id="scene" data-calibrate-x="false" data-calibrate-y="true" data-invert-x="false" data-invert-y="true" data-limit-x="false" data-limit-y="10" data-scalar-x="2" data-scalar-y="8" data-friction-x="0.2" data-friction-y="0.8" data-origin-x="0.0" data-origin-y="1.0"> <li class="layer" data-depth="0.00"><img src="graphics/layer1.png"></li> <li class="layer" data-depth="0.20"><img src="graphics/layer2.png"></li> <li class="layer" data-depth="0.40"><img src="graphics/layer3.png"></li> <li class="layer" data-depth="0.60"><img src="graphics/layer4.png"></li> <li class="layer" data-depth="0.80"><img src="graphics/layer5.png"></li> <li class="layer" data-depth="1.00"><img src="graphics/layer6.png"></li> </ul>
limit-x:限制x轴的移动距离。
friction-x:如果想模仿卡顿的效果,把这个值设置大一点。
origin-x:这个值一般设置为0.5就好,以鼠标为中心进行移动。
scalar-x:如果想要在x轴移动的快一点,将这个数值变大。