65.9K
CodeProject 正在变化。 阅读更多。
Home

适用于您网页的 MS Agent 风格的动画

Helbrax
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.53/5 (21投票s)

2007 年 10 月 23 日

BSD

6分钟阅读

viewsIcon

80135

downloadIcon

472

为您的网页实现MS Agent风格的小动物。

jcritter.png

引言

这是一个用于网页的MS Agent风格类。它只使用JavaScript和(X)HTML。不需要Active-X或其他插件。

背景

我最近需要一种通过某种“互动”方式与网页用户交流的方法，而无需使用Flash或Java。警报框实在太突兀了。我考虑过MS Agent，但它只能与IE兼容。所以我决定自己构建一个，它将在一定程度上模仿MS Agent的功能，但尽可能地跨浏览器。

Using the Code

这个类本身非常易于使用。您只需提供自己的图片并进行一些小调整，以确保所有内容都位于您想要的位置。

<script src="jcritter.js" type="text/javascript"></script>

<script type="text/javascript">
    var newCritter;
    window.onload =    function()
    {
    var monkey = 
    {
        width: 128,
        height: 128,
        src: 'monkey.gif',
        adjustTop: 15,
        adjustLeft: 20,
        speechTop: 45,
        speechLeft: 65

    }
    myCritter = new JCritter(monkey);
    myCritter.draw();
    myCritter.show();
    }
    
</script>

您还可以使用jcritter-mini.js或jcritter-micro.js。jcritter-mini.js是删除了注释和空格的精简版本。jcritter-micro.js是一个极其紧凑的版本，代码经过轻微混淆。jcritter-mini.js和jcritter-micro.js的大小大约是原始jcritter.js的一半到三分之一。

属性

您不应设置这些属性。它们被包含在内，以便您可以测试小动物的当前状态。

  • JCritter.version：显示JCritter版本。
  • JCritter.isHidden：布尔值。显示小动物当前的显示状态。
  • JCritter.isSpeaking：布尔值。显示小动物当前的说话状态。

方法

  • JCritter.drawAgent()：在屏幕上绘制代理。通常不需要使用。
  • JCritter.drawBalloon()：在屏幕上绘制气球。通常不需要使用。
  • JCritter.draw()：绘制气球和小动物。在创建后使用它或重新对齐您的小动物。
  • JCritter.say(text, alignment)：显示气球并说出所需的文本。alignment是可选的，可以是任何有效的CSS 'text-alignment' 值。如果say在没有参数的情况下被调用，则返回气球的内容。
  • JCritter.hush()：移除气球。
  • JCritter.show()：显示小动物。
  • JCritter.hide()：隐藏小动物和气球。
  • JCritter.mute()：使小动物静音。小动物将忽略say方法，直到调用unMute。
  • JCritter.unMute()：解除小动物的静音
  • JCritterdestroy()：销毁小动物对象。您可能希望在body的onunload事件上调用此方法。
  • JCritter.play(animationName)：将当前图像切换到由动画名称指定的图像。与动画GIF配合使用，您可以提供自己的即时动画。
  • JCritter.setFontSize(size)：设置字体大小。
  • JCritter.setFontColor(color)：设置字体颜色。
  • JCritter.setAgent(agent)：将当前代理设置为agent。

事件

所有事件都可以使用标准JavaScript方法设置

object.eventname = function()
{ 
    //do stuff
}
  • JCritter.onClick：当小动物被点击时调用。
  • JCritter.onMouseIn：当鼠标进入小动物的边界时调用。
  • JCritter.onMouseOut：当鼠标移出小动物边界时调用。

自定义

可以添加您自己的自定义小动物图像，而不是使用脚本附带的默认图像。由于无法确定图像本身方形边界之外的语音气泡的确切位置，因此提供了几个选项，允许您“微调”气球的位置。所有这些调整都相对于小动物的左上角。您创建一个包含属性的JavaScript对象，并将其传递给JCritter构造函数。

//Add your own custom critters!

var penguin = 
{
    width: 112,
    height: 112,
    src: 'penguin.gif',
    adjustTop: 15,
    adjustLeft: 20,
    speechTop: 25,
    speechLeft: 65 
    animations:
    {
        animation_name: 'animation_image.gif'

    }
}
  • width：您的小动物的宽度。
  • height：您的小动物的高度。
  • src：您的小动物的图像源。
  • adjustTop：您的小动物相对于视图区域顶部的调整。
  • adjustLeft：您的小动物相对于视图区域左侧的调整。
  • speechTop：您的气球相对于您的小动物顶部的调整。
  • speechLeft：您的气球相对于您的小动物左侧的调整。
  • animations：一个包含动画名称列表和与动画相符的图像的对象。

动画

如果您提供大量GIF图像（可能包含动画），您可以模拟一些动画。主要的缺点是JavaScript无法知道动画何时“结束”。因此，您需要小心使用循环动画，并且您的动画应该在小动物空闲时返回您想要显示的默认图像。

animations:
{
    name: imagesrc,
    name2: imagesrc,
    name3: imagesrc
}
...
JCritter.play('name3');

技术

我们首先要做的是创建将包含我们所处理元素的DIV。我们将使用五个DIV。第一个DIV将包含2-4个DIV。它将包含气泡图像和一个用于文本图像的DIV。最后一个DIV将包含将说话的代理或小动物的图像。

两个“主”DIV用黑色勾勒出轮廓

critter_div_diagram.png

构成气泡DIV的三个DIV

bubble_diagram.png

实际的气泡DIV

bubble.gif

如您所见，气泡图像比我们需要的要大得多。这是为了容纳大量的文本。为了实现这一点，我们使用了一种称为“滑动门”的技术。使用CSS，我们将红色和绿色DIV的背景图像分别设置为气泡图像的顶部和底部。

//the top bubble in red
bubbleTop.style.background = 'url(bubble.gif) no-repeat top';
bubbleTop.style.padding = '25px 8px 0px';

//the bottom bubble in green
bubbleBottom.style.background = 'url(bubble.gif) no-repeat bottom';
bubbleBottom.style.padding = '35px 8px 0px';

您会注意到气泡现在已经完成，但没有文本。我们需要在顶部和底部之间放置一个DIV，并在左右两侧留出一些填充。

//the bubble text in blue
bubbleText.style.paddingLeft = '10px';
bubbleText.style.paddingRight = '10px';

现在唯一真正的问题是定位。小动物/代理需要放置在视口左下角。不幸的是，没有内置机制来获取浏览器窗口的视口，因此在网上搜索了一段时间后，我设法找到了一些代码可以识别这个难以捉摸的属性。

//the width of the viewport
window.innerWidth || (document.documentElement.clientWidth || (document.body.clientWidth || 0));

//the height of the viewport
window.innerHeight || (document.documentElement.clientHeight || (document.body.clientHeight || 0));

如果我们的所有检查都失败，我们将返回x和y为0。这并不理想，但总比什么都不返回要好，那样肯定会破坏脚本。

现在我们知道了视口的宽度和高度，我们可以减去我们的小动物/代理的宽度和高度。这将允许我们将其放置在屏幕的角落。我们必须在这里或那里添加几个美化像素，以便将其定位到所需位置。一旦小动物/代理就位，就可以定位文字气球。默认定位是相对于包含小动物/代理的DIV的左上角。由于不可能自动知道我们的图像是什么样子（嘴巴在哪里等等），我们使用在创建代理时指定的speechLeft和speechTop选项来调整我们的气球。

一旦所有内容都定位好，我们只需在需要显示/隐藏小动物/代理或语音气球时，将两个“主”DIV的属性设置为隐藏/可见。

兼容性

  • Firefox
  • Internet Explorer 7
  • Internet Explorer 6
  • Opera
  • Safari
  • Konqueror

Bug

  • 使用目标时定位可能会出错。您必须使用draw来修复或滚动/调整页面大小（强制重新绘制）。

关注点

此代码在“Web 2.0”网站上效果最佳，因为这些网站的页面不需要经常刷新。IE6不支持fixed属性。因此，当脚本检测到用户正在使用IE6浏览器时，它会将位置更改为absolute，并将draw()方法添加到window.onscroll回调中。如果您调整窗口大小，您需要再次调用draw()方法来重新对齐您的小动物。

历史

  • 2008年10月22日星期三：更新了文章。更新了包含精简版本的zip文件。随机错误修复。
  • 2008年9月5日星期五：更新了文章。
  • 2008年6月10日星期二：更新了文章。
  • 2008年4月28日星期一：更新了文章。
  • 2008年3月5日星期三：恢复了文章（搞什么？）。
  • 2007年10月23日星期二：恢复了文章（意外删除）。
  • 2007年10月17日星期二：上传了0.5版本。
    • 添加了动画支持。
    • 删除了Destroy上的事件处理程序。
  • 2007年10月16日星期二：上传了0.4版本。
© . All rights reserved.