《jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第12章》由会员分享，可在线阅读，更多相关《jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第12章（170页珍藏版）》请在金锄头文库上搜索。
1、,jQuery程序设计基础教程,授课教师： 职务：,第12章 jQuery特效应用实例,课程描述 使用jQuery操作HTML元素、设置CSS样式、动画编程以及HTML5编程等技术可以实现特效，使得开发的Web应用程序更炫目、更具特色。本节介绍一些实用、经典的jQuery特效应用实例的设计过程，力求提高读者的实战能力，将前面所学的技术直接应用到实际开发中。,本章知识点,12.1 提示条实例 12.2 图片播放 12.3 菜单和选项卡 12.4 广告特效,12.1 提示条实例,12.1.1 滑出式提示条 12.1.2 智能提示条,12.1.1 滑出式提示条,以滑动动画的方式显示该图书的详细信息,
2、1实例包含的目录和文件,本实例保存在本书源代码的“1212.1.1”目录下，实例包含子目录如下。 img：用于保存图书封面图片。 script：用于保存实例中使用的JavaScript脚本文件。,实例包含的文件如下, demo.html：本实例的主页。 styles.css：本实例使用的样式表。 scriptjquery.js：jQuery脚本文件。 scriptscript.js：实例中使用的JavaScript脚本文件, 滑动动画等特效都在该脚本中实现。,2设计主页, Oracle 11g是目前最流行的数据库开发平台之一，拥有较大的市场占有率和众多的高端用户，是大型数据库应用系统的首选后台
3、数据库系统。Oracle数据库管理和应用系统开发已经成为国内外高校计算机专业和许多非计算机专业的必修或选修课程。 ,ReadyState属性的取值,当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态，XMLHttpRequest对象的ReadyState属性可以表示请求的状态，它的取值如表10-1所示。,接上, PHP+MySQL是开发Web应用程序的经典组合，具有开放源代码、可以免费下载使用和支持多种操作系统平台等特点，被国内外众多网站广泛采用，具有很强的实用性。本书首先系统介绍PHP程序设计和MySQL数据库管理的基础知识，然后结合几个使用PHP+MySQL
4、开发Web应用程序的实例，包括网络留言板、网络投票系统、网络流量统计系统、二手交易市场系统等，全面介绍了使用PHP和MySQL开发Web应用程序的方法和技巧。 本书既可以作为大学本、专科“Web应用程序设计”课程的教材，也可作为高职高专院校相关专业的教材，或作为Web应用程序开发人员的参考用书。 ,接上, 本书以介绍SQL Server 2008数据库管理系统为主，同时介绍一定的数据库基础知识和数据库应用程序开发等方面的知识。全书共分14章，内容包括：SQL Server 2008数据库系统简介、服务器与客户端配置、Transact-SQL基础、数据库管理、表和视图管理、存储过程和触发器管理、
5、游标管理、维护数据库、SQL Server安全管理、SQL Server代理服务以及使用Visual C#程序设计和开发数据库应用程序。 ,demo.html中使用styles.css设计CSS样式,request.onreadystatechange = function() /函数体 ,在styles.css中定义了页面的背景图片,body /* Setting default text color, background and a font stack */ color:#fff; background: url(img/bg.jpg) no-repeat center top #08
6、1219; font-family:Arial, Helvetica, sans-serif; ,3显示图书名录,在js目录下的script.js中定义了显示图书名录的jQuery代码，具体如下： /* 替换所有的class=main的div元素中的p元素 */ $(.main p).replaceWith(function() /* 定义一个div（滑出的tip框），使用p元素的style、 class 和 title 属性*/ return +$(this).attr(title)+ +$(this).html()+ ; );,div元素的class, class=“tipVisible“
7、的div元素：包含图书的显示部分。 class=“slideOutContent“的div元素：包含图书的滑出部分。 lass=“tipVisible“的div元素又由如下的HTML元素组成。 class=“tipIcon“的div元素：用于定义提示条的图标，其中包含一个class=“plusIcon“的div元素（用于显示加号图标）。 class=“tipTitle“的p元素：用于定义提示条的文字，级图书的书名。,class=“tipIcon“的div元素的样式定义如下,.tipIcon width:20px; height:20px; float:left; background-colo
8、r:#61b035; border:1px solid #70c244; margin-right:8px; /* CSS3 Rounded corners */ -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; ,4滑出图书详细信息的处理,$(.tipVisible).bind(click,function() var tip = $(this).parent(); /* If a open/close animation is in progress, exit the function */ if(
9、tip.is(:animated) return false; if(tip.find(.slideOutContent).css(display) = none) tip.trigger(slideOut); else tip.trigger(slideIn); );,slideOut事件的处理函数代码,$(.slideOutTip).bind(slideOut,function() var tip = $(this); var slideOut = tip.find(.slideOutContent); /* 关闭所有正在打开的提示条 */ $(.slideOutTip.isOpened)
10、.trigger(slideIn); /* 只在第一次单击滑出提示条是执行 */ if(!tip.data(dataIsSet) tip .data(origWidth,tip.width() .data(origHeight,tip.height() .data(dataIsSet,true); /执行过久标记一下 if(tip.hasClass(openTop) /* 如果提示条向上滑出（ class=“openTop“）,则计算与底部的距离，并滑出 */ tip.css( bottom : tip.parent().height()-(tip.position().top+tip.out
11、erHeight(), top : auto );,接上,/* 修改标题的位置在底部，以保证它不会被滑至顶部 */ tip.find(.tipVisible).css(position:absolute,bottom:3); /* 将图书内容移至标题的上面 */ tip.find(.slideOutContent).remove().prependTo(tip); if(tip.hasClass(openLeft) /* 如果有openLeft类别，则向左侧滑出 */ tip.css( right : Math.abs(tip.parent().outerWidth()-(tip.positi
12、on().left+tip.outerWidth(), left : auto );,接上,tip.find(.tipVisible).css(position:absolute,right:3); /* 调整滑出部分的尺寸以相适应内容,然后淡入显示 */ tip.addClass(isOpened).animate( width : Math.max(slideOut.outerWidth(),tip.data(origWidth), height : slideOut.outerHeight()+tip.data(origHeight) ,function() slideOut.fadeI
13、n(); );,slideOut事件的处理函数代码,.slideOutTip.isOpened .plusIcon /* Applying a CSS3 rotation to the opened slideouts*/ -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); ,12.1.2 智能提示条,1实例包含的目录和文件,本实例保存在本书源代码的“1212.1.2”目录下，实例包含子目录如下。 script：用于保存实例中使用的JavaScript脚本文件。 实例包含
14、的文件如下。 demo.html：本实例的主页。 styles.css：本实例使用的样式表。 scriptjquery.js：jQuery脚本文件。 scripttooltip.js：实例中使用的JavaScript脚本文件, 显示智能提示条的功能就是在该脚本中实现的。,2设计主页,在本实例的主页demo.html中，定义了2个p元素，每个p元素中都包含一个a元素，定义代码如下： This is a link This is link #2,使用styles.css设计CSS样式,demo.html中使用styles.css设计CSS样式，定义代码如下： ,在styles.css中定义了a元素
15、的样式,.nr1 a color:#333; width:150px; line-height:150px; background-color:#ccc; display:block; text-decoration:none; position:absolute; top:230px; left:100px; text-align:center; padding:3px 0px; ,接上,.nr2 a color:#333; width:150px; line-height:150px; background-color:#ccc; display:block; text-decoration:none; position:absolute; top:290px; right:500px; text-align:center; padding:3px 0px; ,接上,a:hover color:#fff; background-color:#666; ,3显示智能提示条,function simple_tooltip(target_items, name) / item是显示提示条的元素名称，name为提示条的class名称 $(target_items).each(function(i) / 在网页中添加一个lass名称为name的div元素，作为提示
