丙申猴年祝福

大年初三,在家无聊胡言乱语写了篇总结,顺便发个新年祝福。

新的一年里,祝大家:工作舒心,薪水合心,被窝暖心,朋友知心,爱人同心,一切都顺心,永远都开心,事事都称心!

简洁Metro风格jQuery下拉框插件分享

日常工作中经常需要对form表单元素进行美化,而常用元素中唯独select下拉框最不易通过CSS重写样式,所以选择使用自定义的样式加列表模拟原生select。

此类插件网上也是很多,但很多插件功能是大而全的,而我需要的只不过是简简单单的风格样式上的统一,于是,自己草草写下了一款小插件,优点是可以通过以下三种方式生成:

1、在某个div上示例化组件,通过传入数组生成
2、通过固定格式的dl dd自定义列表生成
3、通过原生select生成,同时,如果你不愿意改动事件绑定代码来完成联动,可以保持原有程序不变,取值也依然是不变的。
查看更多...

关于七牛云不得不吐槽的那些事

最近无聊折腾博客,又萌发了把图片放到某个云存储的念头,这才想起之前注册过的七牛云,待登录了才发现,界面是这样的。

关于七牛云1

回忆一下,才想起来,这是很久前的事了,翻了翻邮件,发现自己注册七牛账户是在2013年的12月1日

关于七牛云2
查看更多...

如何通过HTTP缓存优化您的网站

对于互联网网站来说,加载速度是很重要的,面对各种资源的缓慢加载,大部分用户总是讨厌等待,以致于直接关掉页面(当然,如果你的网站内容不是必须或者不是唯一的情况下)。所幸HTTP协议中提供了完善的缓存机制,使我们可以一定程度上优化这种缓慢带来的负面影响。

什么是缓存?

缓存是一个到处都存在的用空间换时间的例子。通过使用多余的空间,我们能够获取更快的速度。用户在浏览网站的时候,浏览器能够在本地保存网站中的图片或者其他文件的副本,这样用户再次访问该网站的时候,浏览器就不用再下载全部的文件,减少了下载量意味着提高了页面加载的速度。

下面这个图例说明了浏览器和服务器之间如何进行交互。 查看更多...

基于CSS3 animation实现Marquee效果

最近实现手机端小游戏,看到有同事用到老掉牙的marquee标签,就不说html5已经废弃此标签了,单是性能就已经够呛,于是想换种实现方案,第一想法自然是js实现,当然也是最为灵活的,这里不再赘述。

期间曾看到有相关文章描述overflow实现的Marquee,用法如下:

overflow:-webkit-marquee;

尝试一下并无效果,最后发现30+的chrome版本中,Google已经把这玩意移除了。

另外就是今天的主角——CSS3 animation,依然很简单: 查看更多...

初识Kotlin

Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发。作为目前广受欢迎的 Java IDE IntelliJ 的提供商,在 Apache 许可下已经开源其Kotlin 编程语言。

Kotlin设计目标是

1、创建一种兼容Java的语言

2、让它比Java更安全,能够静态检测常见的陷阱。如:引用空指针

3、让它比Java更简洁,通过支持variable type inference,higher-order functions (closures),extension functions,mixins and first-class delegation等实现。

4、让它比最成熟的竞争对手Scala语言更加简单。 查看更多...

网页局部滚动时屏蔽全局滚动事件(屏蔽鼠标滚轮事件)

标题有些绕,其实就是很简单的问题,很多人应该都遇到过,最近优化自动完成的插件,发现在下拉框内容多时出现滚动条的情况下,如果页面本身也有滚动条,就很容易出现两边都滚动的情况,体验非常之差。因为之前没有考虑过此类问题,自信想了下,应该可以通过技术手段避免。

一开始想过监听scroll事件,但是发现这样的想法本身就有误区,因为滚动某个元素本身,而要去屏蔽window的滚动,根本说不通,那么换一种思路,既然滚动通常是鼠标操作,何不操作处理滚轮事件?

简单查了下,的确有类似的文章,我们都知道,jQuery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jQuery的Mousewheel插件,具体插件大家可以搜jquery.mousewheel.js找到,这里不再额外贴地址。 查看更多...

结合HTML5、CSS3、JS模拟微信摇一摇开发小记

客户想要通过网页实现一个类似微信摇一摇的小游戏,周末在家没事,就做了下,摇一摇之前有做,但是效果不是类似微信那样的,所以照搬旧实现方案,采用github上人气略高的一个Device Accelerometer封装函数,这样就不用自己去爬各种坑了。

摇动事件是解决了,但想模拟声音、震动之类的,还得找一下新的api,因为之前没用过,所以大概收集了下资料,下面简单记录一下。

摇动就不再赘述了,简单几步,可以参考这里https://github.com/alexgibson/shake.js
查看更多...

纯CSS实现Footer固定底部,超过一屏自动撑开

日常开发中经常遇到网页内容过少时底部版权区域上浮,网页是经典的Header、Content、Footer三部分组成的情况下,之前要么采用js修改Footer的position,高度低于一屏时采用fixed,超出改用static,但是这样会出现抖动,也试过初始化时设置Content的min-height,但终归是使用了js,不太完美,CSS的也试过使用margin-bottom:-10000px;padding-bottom:10000px的方法填充底部颜色,但效果不见得有多好看。

最近又遇到此类问题,尝试采用之前提到过的CSS水平垂直居中方法来解决,最终找到比较靠谱的方法,就此总结一下,以备后用。

废话不说,直接上代码,以下为CSS,采用border-box,所以IE7下面无效,由于工作原因,只测试到IE8,没考虑低版本浏览器。 查看更多...

JS获取鼠标点击坐标五种方式及兼容性

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

event.clientX/Y
event.pageX/Y
event.offsetX/Y
event.layerX/Y
event.screenX/Y

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

兼容性:所有浏览器均支持 查看更多...