YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

YAOHAIXIAO.COM » Home

[更新]BlueNight 原创 WordPress 主题下载(Version 1.3.36)

[更新]BlueNight 原创 WordPress 主题下载(Version 1.3.36)

自己是做前端开发工作的,对于页面前端代码的质量和性能一直都要求比较严格。而从网上下载的那些 WordPress 主题的 HTML 结构和前端的性能一直都不太满意,所以这两天就自己动手做了一个——BlueNight。 BlueNight 主题特点简介 支持自定LOGO,可设置文字或者图片 LOGO 支持自定义背景图片 支持(顶部、主导航、底部)自定义菜单 支持 Featured Image, 默认尺寸:106 * 106 支持 Featured Image Header(首页幻灯图片) 非首页显示20张随机的背景图片,没什么特殊,就是为了展示一下自己的城市,让页面也不那么单调。如果您对这些图片背后的故事感兴趣,可以看看《BlueNig… [阅读全文]

jQuery EasyCarousel Plugin

Carousel 实例演示 普通的横向滚动 来回滚动(默认) 普通的横向滚动 最大最小页按钮不可用 普通的横向滚动 指定默认的显示页面 普通的横向滚动 自定义 easing 切换动画 普通的横向滚动 自动播放 普通的横向滚动 向上翻页 自动播放 普通的横向滚动 指定一次滚动的距离 普通的横向滚动 指定滚动一屏的时间 普通的横向滚动 自动滚动 指定滚动到下一屏的等待时间 普通的横向滚动 带 Tabs 导航 横向无缝循环滚动 横向无缝循环滚动 全部配置 纵向无缝循环滚动 全部配置 Scroll 实例演示 自动横向循环无缝滚动 自动纵向循环无缝滚动 特点简介 EasyCarousel Plugin 是 jQuery 写的又一个非常实用的 … [阅读全文]

jQuery 带缩略图相册效果

jQuery 带缩略图相册效果

jQuery 带缩略图相册效果,一个比较实用的相册效果,基本上就是常见的图片网站用的相册效果,推荐大家试试! 演示地址:http://www.yaohaixiao.com/scripts/jAlbum/ 代码下载:jAlbum CSS 代码 .album{ margin:20px auto; width:1000px; border:10px solid #FFF; -webkit-box-shadow: 1px 2px 5px #CCC; -moz-box-shadow: 1px 1px 5px #CCC; box-shadow: 1px 1px 5px #CCC; overflow:hidden; } .album-image-… [阅读全文]

jQuery Simple Album – jQuery相册效果

jQuery Simple Album –  jQuery相册效果

用jQuery开发的一个简单而实用的相册效果。 下载地址:album.zip /** * @author Yaohaixiao */ (function($){ var PX = “px”, CURRENT = “current”, HIDE = “hide”; /** * Album 构造函数 * @constructor $.Album * @param {Object} [config] – (可选)初始化参数 * @param {HTMLElement|String} [config.root] – (可选)相册的根节点(DIV 元素),默认值:$(“#album”) * @param {HTMLElement|String… [阅读全文]

auolink()函数 PHP实现将文本中的所有的URL地址转换为可点击的链接

auolink()函数 PHP实现将文本中的所有的URL地址转换为可点击的链接

其实我在《将文本中url地址替换为可以点击的链接的处理办法》一文中介绍过PHP代码如何实现将URL地址转化成链接的方法,今天给大家介绍一个更加简洁的版本,先来看看PHP的源代码: auolink() API /** * Author: SeeDZ * From: http://code.seebz.net/p/autolink-php/ **/ function autolink($str, $attributes = array()) { $attrs = ”; foreach ($attributes as $attribute=>$value) { $attrs .= ” {$attribute}=\”{$value}\””… [阅读全文]

TodoMVC 让选择适合项目的JavaScript MVC框架不再纠结

TodoMVC 让选择适合项目的JavaScript MVC框架不再纠结

TodoMVC 选择适合项目的MVC框架不再纠结。又一个新的项目开始了,可是还在犯愁该使用什么MVC框架才适合现在的项目。不知道大家有没有过类似的经历,我是曾经纠结过的。TodoMVC 这款工具应该可以解决你的烦恼。TodoMVC 是这样介绍自己的: Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps. Backbone, Ember, AngularJS… the list of … [阅读全文]

推荐几本前端性能优化相关的书籍

推荐几本前端性能优化相关的书籍

之前写了关于前端性能优化的系列博文,介绍了 YSlow 和 PageSpeed 的前端性能优化的规则。而今天则要给大家推荐几本个人认为不错的关于前端性能优化的书籍。 《高性能网站建设指南》 作者:Steve Souders 出版社:电子工业出版社 简介:这本书是 Steve 还在任雅虎首席性能分析师时编写的,这个本书应该算是前端工程师必看的一本书关于前端性能优化的书了。真不必多介绍了,一定要买了看看! 整本书就是介绍14条前端性能优化规则,每一条规则都是前端工程师们应该牢记的(Steve 的演讲视频:High Performance Web Sites 14 Rules for Faster Pages): 尽可能的减少 HTTP … [阅读全文]

开发工具:7款免费的代码编辑器

开发工具:7款免费的代码编辑器

Light Table Light Table是一个多平台的免费的IDE。其网站是这么介绍这款IDE的: Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games. It provides the real time feedback we need to not only answer questions about our code, but to understand how our programs really work. Light Table 是… [阅读全文]

前端性能优化:Defer parsing of JavaScript

今天介绍 PageSpeed 的前端性能优化规则是:Defer parsing of JavaScript(暂缓 JavaScript 解析)。 Defer parsing of JavaScript 规则简介 In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring … [阅读全文]

前端性能优化:Specify image dimensions

今天介绍 PageSpeed 的前端性能优化规则是:Specify image dimensions(指定图片大小)。 Specify image dimensions 规则简介 Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints. 译文:为所有图像指定宽度和高度能够实现更快的渲染并可以省去不必要的重排列和重绘。 其实在前面介绍《Do not scale images in HTML》规则的是有就提到过,给图片设置大小的… [阅读全文]

前端性能优化:Optimize images

今天介绍 PageSpeed 的前端性能优化规则是:Optimize images(优化图片)。 Optimize images 规则简介 Properly formatting and compressing images can save many bytes of data. 译文:选择正确的图片格式和压缩图像可以节省很多的字节的数据。 优化图片不光指压缩图片大小,还包括如何选择正确文件格式保存图片。压缩的工具我在《推荐4款在线图片压缩工具》一文中已经介绍了一些,今天再介绍一款Mac系统下的压缩工具:ImageOptim,可以压缩很多中格式的图片,可以在MacUpdate里直接下载,目前还是免费的,而且图片的压缩率也还不错。用… [阅读全文]

Toggle side bar