文档详情

jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第12章.ppt

发布:2017-08-18约4.47万字共170页下载文档
文本预览下载声明
广告条可以分为若干的区域 以网页上方正中的广告条为例说明。该广告条分为3个区域ca_zone1、ca_zone2和ca_zone3,定义如下: div id=ca_banner1 class=ca_banner ca_banner1 div class=ca_slide ca_bg1 div class=ca_zone ca_zone1!--Product-- div class=ca_wrap ca_wrap1 img src=images/product1.png class=ca_shown alt=/ img src=images/product2.png alt= style=display:none;/ img src=images/product3.png alt= style=display:none;/ img src=images/product4.png alt= style=display:none;/ img src=images/product5.png alt= style=display:none;/ /div /div 接上 div class=ca_zone ca_zone2!--Line-- div class=ca_wrap ca_wrap2 img src=images/line1.png class=ca_shown alt=/ img src=images/line2.png alt= style=display:none;/ /div /div div class=ca_zone ca_zone3!--Title-- div class=ca_wrap ca_wrap3 img src=images/title1.png class=ca_shown alt= / img src=images/title2.png alt= style=display:none;/ img src=images/title3.png alt= style=display:none;/ /div /div /div 这3个区域在广告条中的位置 动画转换步骤的格式 [{to : 显示的图片序号字符串}, {effect: 动画转换效果字符串}], // 出现在steps属性中的顺序决定了对应的区域 广告条ca_banner1动画特效的代码 $(#ca_banner1).banner({ steps : [ [ //1 step: [{to : 2}, {effect: zoomOutRotated-zoomInRotated}], [{to : 1}, {}], [{to : 2}, {effect: slideOutRight-slideInRight}] ], [ //2 step: [{to : 3}, {effect:slideOutTop-slideInTop}], [{to : 1}, {}], [{to : 2}, {}] ], [ //3 step: [{to : 4}, {effect: zoomOut-zoomIn}], [{to : 2}, {effect: slideOutRight-slideInRight}], [{to : 2}, {}] ], 接上 [ //4 step [{to : 5}, {effect: slideOutBottom-slideInTop}], [{to : 2}, {}], [{to : 3}, {effect: zoomOut-zoomIn}] ], [ //5 step [{to : 1}, {effect: slideOutLeft-slideInLeft}], [{to : 1}, {effect: zoomOut-zoomIn}], [{to : 1}, {effect: slideOutRight-slideInRight}] ] ], total_steps : 5, speed : 3000 }); 12.4.2 弹性伸缩广告 随后滑出的广告条幅 1.实例包含的目录和文件 本实例保存在本书源代码的“12\12.4.2”目录下,实例包含子目录如下。 ? images:用于保存本例中使用的图片。 ? js:用于保存实例中使用的JavaScript脚本文件。 实例包含的文件如下。 ? index.html:本实例的主页。 ? js\jquery.js:j
显示全部
相似文档