JQuery实战第六讲:窗口效果


ITCAST版权所有 绚丽效果教你做之JQuery实战 —窗口效果 ITCAST签约讲师 王兴魁 Page 2ITCAST版权 所有 JQuery实战 z本次课程实例展示 Page 3ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z1.页面中模拟的窗口可以通过html的div标签 来实现,窗口中的标题栏和内容区域可以再 分别用一个div来表示 z2.让一组div看起来是窗口的样式,有很多种 方法,比如可以设定整个窗口使用一种背景 色,然后内容区域使用另一种背景色,并且 给窗口设置一定的padding值(或者是内容区 域设置边框),已达到内容区域和标题栏以 后窗口外边的对比,从而看起来是一个窗口 的效果。 Page 4ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z3.正确理解float的效果,实际上会影响到后面 的一个元素和float的元素之间的显示效果,因 此这个例子中如果html代码中img位于标题栏 的最后时,float: right导致图片跑到了内容区 域的最右边。只有在html里面将img放到标题 栏文字的前面,这个时候float: right才会使图 片刚好位于标题栏的最右边 z4.overflow属性值为auto时,当内容区域很多 超过了定义的高度或宽度时,就会显示滚动 条。 Page 5ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z5.position属性值为absolute时,元素将在页 面中绝对定位,默认情况是相对页面的左上 角进行定位。如果祖先节点中有position: relative的定义,则相对这个祖先节点的左上 角进行定位 z6.浏览器可视区域的宽和高可以通过 $(window).width()和$(window).height()的方 式来获得 Page 6ITCAST版权 所有 JQuery实战 z 本节学到的JQuery及其他开发知识: z7.浏览器滚动条的左边界和上边界可以通过 $(window).scrollLeft()和 $(window).scrollTop()来获得 z8.窗口定位到屏幕可视区域的正中间,需要用 屏幕可视区域的宽减去窗口的宽,然后除2, 再加上滚动条的左边界值,才能获得窗口需 要的左边界值;上边界值也是同理的方法获 得。 Page 7ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z9.插件的编写方法:$.fn.myplugin = function(){//mycode},方法中的this表示的是执 行这个方法的jquery对象,注意方法应该在最 后return this,以保证其他jquery方法可以级联 操作。 z10. instanceof可以用于判断一个变量是不是 一个某个js类的实例,比如判断是不是一个 Object,用法obj instanceof Object Page 8ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z11. typeof可以用于判断一个变量的数据类型 ,比如typeof str == “string” z12.height()和width()方法获得是元素本身的高 和宽,innerHeight()和innerWidth()获得是包 括了padding的高和宽,outerHeight()和 outerWidth()获得是包括了border和padding的 高和宽,outerHeight(true)和outerWidth(true) 获得是包括maring,border和padding的高和 宽 Page 9ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z13.scroll可以用于注册浏览器或某一个节点的 滚动条滚动所需要执行的操作。 z14.resize可以用于注册浏览器大小改变时所 需要执行的操作。 z15.jquery提供的事件操作在注册的时候是增 量的,比如说我有两段代码都是 $(window).scroll(function(){}),第二段的 function内容不会覆盖到第一段,而是在scroll 时,两段代码都被执行 Page 10ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z16.animate方法可以对left,top值进行一定时 间内的变化,达到动画的效果。 z17.dequeue方法可以从动画队列的开头移除 一个动画效果,并立即执行它。这样可以保 证队列后面的动画不用等待开头的动画,也 能执行。 z18.is方法可以用来判断一个对象是否满足is方 法参数中的jquery选择器 Page 11ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z19. :visible选择器可以用于获取页面中的可见 元素 z20.浏览器间的差异导致在document.ready中 中的代码获得浏览器可视区域宽高以及滚动 条left,top的值不一定都是正确的,因此我们 需要保证在这个方法完成之后再来获得这些 值。 Page 12ITCAST版权所有 JQuery实战 z本节学到的JQuery及其他开发知识: z21.$.browser可以用于判断浏览器的类型,判 断的方法可以是$.browser.msie == true,还 可以使用的值包括$.browser.opera $.browser.safari $.browser.mozilla z22.$.browser.version可以判断浏览器的版本 号,例如$.browser.version.indexOf(“8”) ITCAST版权所有 谢谢!
还剩12页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

xyz90000

贡献于2012-06-03

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf