随笔分类 - jquery
摘要：今天要介绍的是走马灯效果的制作，效果图如下，页面中‘Recent Posts’就是走马灯部分。 现在我们介绍如何制作走马灯，首先定义html页面结构。<div id="outer"> <header> ... </header> <article> ... </article> <aside> ... </aside></div> 走马灯部分的html是通过js实现的，这部分html会添加在上面html header对象下面，生成的html结构如下：<div id=&quo
阅读全文
摘要：今天课程介绍的是移动的背景，顺便讲解下div+css动画的原理。首先还是先介绍如何制作移动的背景效果。 html代码比较简单，我就全贴出来了，稍后介绍js的实现。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> header { display: block; width: 660px; height: 380px; margin: auto; backg...
阅读全文
摘要：今天我们要介绍的jquery动画效果是，当移动鼠标或者按键盘的左右键时，图片走廊中的图片向相应方向转动。 先来看张效果图，教程最后附有demo，大家可以下载。 首先要做的工作是创建html文本。<div id="proximity"> <img src="img/proximity1.jpg" alt="CH-47 Chinook" /> <img src="img/proximity2.jpg" alt="Mi-24W" /> <img src=&qu
阅读全文
摘要：我们本章要介绍的是单页导航动画效果的实现，感觉有点拗口，其实我也不知道这个效果动画到底叫什么名字合适。 其实他实现的功能还是好理解的，就是有一个母页面，母页面会加载一定数目的子页面，母页面上有各个子页面的link。默认母页面显示第一个子页面的内容，当点击母页面上的链接时，显示相应子页面的内容。这里的母页面和子页面是实际存在的不同页面，但是整个动画实现的结果是，所有页面的切换都是在母页面上实现的，url并没有发生变化。要是大家还不知道是怎么回事，那就下载demo看运行效果吧，一看便知。 好了不说废话了，开始我们的教程。第一步是创建母页面的html代码。<div id="outer
阅读全文
摘要：我将上一章中了插件做了个小小的升级，实现了自动运行效果，完整代码大家见demo。 主要的变化点有：把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval，添加selector元素的hover事件。好了，我们一个个的看。showNext函数：//显示函数function showNext(flag) { //隐藏导航 $(config.selector).find('a').css('display', 'none'); //创建遮罩 $.tranzify.createOverlay(config);
阅读全文
摘要：今天我们要完成的是一个带有遮罩效果（补间动画）的图片走廊jquery插件：jquery.tranzify.js。我们先看下效果： 好了，现在我们开始讲解这个jquery动画插件如何制作，大家可以再文章最后下载demo，查看详细代码。 首先开始准备html页面，代码很简单就是一个id为frame的div，里面包含了一些图片。<div id="frame"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <i
阅读全文
摘要：今天文章的内容是关于使用jquery的animate方法，修改html元素的position属性，创建一个图片走廊。效果预览图片： 大家可以下载demo看完整效果，下面介绍制作过程。 1.首先创建一个html页面，html结构如下：<div id="slider"> <div id="viewer"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <img id="
阅读全文
摘要：我们今天要做的是手风琴panel，jquery.ui里面有个叫做accordtion的插件，我们要实现的效果和他一样。 首先我们还是创建一个html文件，里面包含如下的html结构。<div id="pane-container"> <div class="pane"> <h1>first pane</h1> <p>this script should allow only one pane to be visible at a time.</p> </div> <
阅读全文
摘要：今天我们介绍的是提示框插件tooltip的制作，其中还会介绍到自定义选择器插件的开发。 我们首先来介绍自定义选择器的开发，他的代码结构如下：(function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code };})(jQuery);调用时候的写法：$(a:customselector) 现在我们先解释下函数中所使用到的各个参数。 object：当前dom元素的引用，而不是jquery对象。需要强调的一点，dom元素和jquery对象完全不...
阅读全文
摘要：本章我们将创建一个自增长的输入框插件，jquery.aotogrow.js。首先还是看html代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <
阅读全文
摘要：该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。 动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。什么时候使用动画： 1.当显示或隐藏页面、弹出框或内容区域的时候； 2.当一些内容从页面的一个地方移动到其他地方的时候； 3.当页面中的一些内容，应用户的操作而产生状态改变的时候； 4.当一些内容在几种状态间转变的时候； 5.引导用户去执行某些操作，或者引起他们对某些很重要信息注意的时候。什么时候不应使用动画： 1.当某些操作是需要用户频繁重复操作的时候； 2.当设备...
阅读全文
摘要：今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范。 先下页面代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &
阅读全文
摘要：本文主要内容是讲解图片走廊-gallery的实现。 首先创建jquery.gallery.js的插件文件，构建程序骨架。(function ($) { $.fn.gallery = function () { return this.each(function () { var self = $(this); self.click(function () { }); }); }})(jQuery); 创建html文件，使用...
阅读全文
摘要：该系列文章是我阅读<jQuery Plugin Development Beginner's Guide>后的总结，有兴趣的朋友可以去读原版的书籍。 定义插件的结构骨架： 书中最开始使用的结构骨架如下：jQuery.fn.fluginmane=function(){ return this.each(function(){ //code... })} 这种结构不是很理想，特别书中提到，为了防止冲突例子不使用$，而使用jQuery。在这里，我们使用匿名函数的方式实现插件的结构骨架，这样就可以防止可能的冲突。也希望大家好好了解下匿名函数相关的知识。(function($){..
阅读全文
