AnnotationOverlayEffect分析报告.doc

实验二：AnnotationOverlayEffect 页面显示效果 代码分析 1、整体分析 整体上分析代码，可以看出页面由一组html标签，包含了一组head和body标签，在head中包含了标题、字符的编码方式、页面的元信息cufon-yui.js和Bebas_400.font.js两个类库，另外还包含一组JavaScript脚本和一组CSS样式。body中包含许多div标签，引入了jquery.min.js类库，也包含有一组JavaScript脚本。 2、关键代码分析 以上代码使用了Cufon技术实现Web自定义字体。具体步骤是： 引入Cufon核心库 作为一种基于javaScript的网页字体引入方案，Cufon的核心功能是通过一个名为“Cufon-yui.js”的JavaScript类库。因此使用 Cufon 技术的第一步，在 Web 页面中引入这一类库。代码中引入Cufon库，如下所示： script src=js/cufon-yui.js type=text/javascript/script这里说的字体文件是Cufon字体文件，这是使用 Cufon 技术的另一个关键所在。 Cufon 字体文件，是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。而和其他字体创建标准如 TrueType、OpenType 等不同的是，按照 Cufon 标准所形成的这一文件本身，就是一个标准的 JavaScript 脚本文件，并交由 Cufon 类库进行解析和处理。通过如下代码所示的形式将其引入到页面中： script src=js/Bebas_400.font.js type=text/javascript/script 应用Cufon渲染 在完成了上述的两项准备工作后，使用 Cufon 类库来实现对字体的渲染是非常简单的，这仅仅牵涉到了 Cufon 类库所提供的一个核心方法，即 Cufon.replace 方法，如下代码所示： script type=text/javascript Cufon.replace(a, h1, h2, h3); Cufon(h1,h3,{ textShadow: 1px 1px #fff }); /script 此部分代码是对显示在图片上层的阴影图片的处理。 $portfolio.find(.zoom_overlay).bind(click,function(){ 用protfolio找到id号为zoom_overlay的代码，这里的zoom是指点击后显示的那个阴影背景图片。让那部分实现一下功能。bind函数表示点击protfolio找到的图片实现function函数。 var $elem = $(this); var $image = $elem.prev().find(img:first); $elem.find(img) .hide() .end() .stop(true) .animate({ width :400px, height:400px, marginTop :-200px, marginLeft:-200px, opacity :0 通过elem函数找到img，定义了hide，end，stop三个属性，再通过animate() 方法执行 CSS 属性集的自定义动画 },125,function(){ $(this).hide(); hide函数隐藏图片 }); $image.stop(true) .animate({ width:500px, height:500px },250); 当鼠标停止操作，还回原来的状态时，它显示的大小 }); }); /script 心得体会 通过这次学习，对AnnotationOverlayEffect有了基本的了解，会基本的操作以及编程。在原有的基础上，更改之后会有一些细微的变化，虽然还不是非常擅长编程，但是也是对一个新的技术的一个初步了解。