YAOHAIXIAO.COM

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

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

Rss

Home » Posts tagged "jQuery"

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… [阅读全文]

DataTables

DataTables

DataTables 是一款开源的jQuery的表格Grids插件,采用GPL v2 或者 BSD (3-point) 协议授权。 DataTables is dual licensed under the GPL v2 license or a BSD (3-point) license. DataTables 有较为完善的 API 文档,常用的示例和使用方法都可以非常方便的在网站上查询到。DataTables 本身的功能就已经是十分强大了,再加上众多的 Extras 和 Plug-ins,让 DataTables 变得更加强大。推荐大家试用一下! 官方网站:http://datatables.net/ 软件下载:V1.9.4

jQuery API 教程 – add() 方法详解

jQuery API 教程 – add() 方法详解

jQuery 官方的 API 文档 Description: Add elements to the set of matched elements. 描述:向匹配的元素集合中添加元素 version added: 1.0.add( selector ) selector Type: Selector 参数类型: 选择器 A string representing a selector expression to find additional elements to add to the set of matched elements. Selector为一个选择器字符串,将这个选择器匹配的元素添加到匹配的元素集合。 versio… [阅读全文]

jQuery 1.9.1 的改变,没有了 $.browser 转而使用 $.support

jQuery 1.9.1 的改变,没有了 $.browser 转而使用 $.support

这两天看到 jQuery 升级到了 1.9.1 于是把自己网站的 jQuery 也升级了。但是发现以前的 $.browser 属性没有了。原来新的 jQuery 1.9.1 不再支持这个方法了。转而推荐使用 $.support。引用 jQuery 官方网站的说法: Rather than using $.browser to detect the current user agent and alter the page presentation based on which browser is running, it is a good practice to use feature detection. To make thi… [阅读全文]

Infinite Scroll & Masonry–jQuery 瀑布流布局插件实例

Infinite Scroll & Masonry–jQuery 瀑布流布局插件实例

程序简介: Infinite Scroll & Masonry是两个非常不错的 jQuery 插件,利用这两个插件我们就可以很容易的实现时下流行的瀑布流布局。作为商品展示和图片分享展示,这个效果是再合适不过了。看看效果吧: // 调用代码 (function(){ function item_masonry(){ $(‘.item img’).load(function(){ $(‘.infinite_scroll’).masonry({ itemSelector: ‘.masonry_brick’, columnWidth: 226, gutterWidth: 15 }); }); $(‘.infinite_scroll… [阅读全文]

利用 jQuery.lazyload 插件优化 WordPress 的 Gravatar 评论图片和特色图片加载

利用 jQuery.lazyload 插件优化 WordPress 的 Gravatar 评论图片和特色图片加载

这几天一直都在想办法优化 BlueNight 主题的前端性能和增加适当的交互程序提高用户体验。今天就来介绍一下如何利用 jQuery.lazyload 插件来优化WordPress 的 Gravatar 评论图片和特色图片加载。利用jQuery.lazyload 插件懒加载页面中的图片,从而提升页面的响应速度,优化一下WordPress 的前端性能。 什么是 lazyload? 优势 首先还是介绍一下什么是 lazyload,或者说为什么使用 lazyload?lazyload 直接翻译过来就是懒加载,是利用 JavaScript 程序动态的加载图片的一个特效。这个效果的特殊之处是可以做到当用户的鼠标滚动到快要看到图片的时候,才开始… [阅读全文]

JavaScript 实例教程 – jQuery 实现返回顶部效果

JavaScript 实例教程 – jQuery 实现返回顶部效果

Back to Top – 目前很多网站都使用的一个实用的效果,在页面内容比较长的页面时,用户浏览内容(窗口滚动条)到一定位置时,在内容主题部分的右边会有一个“返回顶部”的按钮,用户点击这个窗口就自动滚动到页面顶端。这个交互设计对提高用户的浏览体验确实有帮助,那么怎么实现呢?今天我就来讲讲如何实现这个效果。 返回顶部按钮的 XHTML 代码 示例1:Back to Top Downloads:backtop.zip 我们看到效果图,返回顶部按钮是显示在主体内容的外边。不过显示在外面,并不代表这个按钮的代码在内容之外,而实际上它应该写在主体内容页脚(footer)里面的: <div class=”wrap foote… [阅读全文]

DropDown Menu – jQuery 多级下拉菜单插件

DropDown Menu – jQuery 多级下拉菜单插件

程序简介: DropDown Menu – jQuery 多级下拉菜单插件是用 jQuery 开发的,为 WordPress 自定义导航菜单添加多级下拉菜单支持的十分轻量级的 JavaScript 脚本程序。 $(‘#top-navigation’).dropMenu(); 下载地址:dropmenu.zip 程序特点: 支持无限极的下拉菜单显示 支持 Tab 键切换显示 浏览器兼容性好 程序 JavaScript 源代码: /** * @author Yaohaixiao */ (function($){ $.fn.extend({ dropMenu: function(menuItem, subMenuItem){ … [阅读全文]