-

WEB前端

WEB前端包括HTML标签、CSS样式和JS编程等相关的知识。雷雪松的博客WEB前端栏目主要是分享作为WEB前端工程师在WEB前端开发的过程中WEB前端技巧,优秀的JS插件,有趣的JS效果,常用的CSS技巧以及HTML5最新技术。

页面加载进度条pace.js

WEB前端

Pace.js是一个非常有意思的js插件,可以自动的监听页面的加载数据,并且能够定制加载条。最重要的一点,它还可以监测到ajax的调用并且出现加载条提示。它还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约、闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果)。
阅读原文 »

轻松实现全屏滚动-FullPage.js

WEB前端

fullPage.js 是一个基于 jQuery 的插件,主要功能有:支持手机、平板触摸,鼠标滚动,前进后退和键盘控制,多个回调函数,可自定义设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等,不仅支持上下滚动也支持左右。fullPage.js兼容 Internet Explorer 8,9, Opera 12,chrome,Firefox等主流浏览器。
阅读原文 »

非常优秀的8个HTML5前端框架

WEB前端

HTML5框架是一类有助于快速轻松创建响应式网站的程序包。这些HTML5框架有着能减轻编程任务和重复代码负担的神奇功能,它们能够允许我们用更少的时间和精力去创建一个令人惊艳的网站。以下是我较熟悉推荐给大家的框架:
阅读原文 »

跨浏览器本地存储-Store.js

WEB前端

store.js是一个跨浏览器的数据本地存储JS插件,可以在不依赖 cookie 和 Flash 的情况下把数据保存在客户端。store.js最大的优点就是很好地解决了一些老版本浏览器不支持html5 LocalStorage API的问题,store.js 会根据浏览器自动选择使用 localStorage、globalStorage 或者 userData 来实现本地存储功能。 压缩版的store.js非常的小巧,仅仅只有2.56 kB。使用起来也很方便。
阅读原文 »

JS中浮点数运算不精准

WEB前端

Javascript采用了IEEE-745浮点数表示法,这是一种二进制表示法,可以精确地表示分数,比如1/2,1/8,1/1024。遗憾的是,我们常用的分数都是十进制分数1/10,1/100等,二进制浮点数表示法并不能精确的表示类似0.1这样的简单的数字。所以会有js中浮点数运算不精准的问题出现,我们一般会重写js的四则运算。下面主要看看解决js中浮点数运算不精准的具体方法。
阅读原文 »

jQuery打字效果插件typer.js

WEB前端

typer.js插件是一个非常有意思的jQuery插件,实现一个一个字输出,类似打字的效果。typer.js是一个比较小的插件,依赖于jQuery。typer.js使用起来也比较方便,允许设置打字时间间隔,循环输出,清除打字效果时间等。
阅读原文 »

Bootstrap表单和列表详解

WEB前端

Bootstrap提供了对表单布局和列表的支持。垂直表单(默认)、内联表单、水平表单,如果您不想显示有着重号的列表,您可以使用class.list-unstyled来移除样式。您也可以通过使用class.list-inline把所有的列表项放在同一行中,可以使用class.dl-horizontal 把<dl>行中的属于与描述并排显示。
阅读原文 »

CSS3动画库animate.css介绍和使用

WEB前端

animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce)、摇摆(swing)、颤抖(wobble)、抖动(shake)、闪烁(flash)、翻转(flip)、旋转(rotate)、淡入淡出(fade)、滑动(Sliding)、光速(lightspeed)、缩放变焦(Zoom)、翻滚(roll)等多达 70 多种动画效果,借助 animate.css 能够很方便、快速的制作 常见的动画效果。当然animate.css只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。
阅读原文 »

解决谷歌字体无法加载

WEB前端

在网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体能否正确显示则在于用户的电脑是否安装了该字体。我们经常能看到国外使用@font-face引入google字体实现个性化字体。说@font-face是CSS3的新特性并不准确,因为CSS2就已经支持了这一特性,并且Internet Explorer早在第5版的时候就已经支持它了。我们可以使用360网站卫士常用前端公共库CDN服务将谷歌的字体转换到360公共库。

阅读原文 »