导航条——调用网页助手小精灵

1.概述

在网站中加入网页助手小精灵,当用户访问网站时,向用户问好,或是传递一些网站的重要信息,不仅可以帮助用户快速了解网站,而且可以让用户对该网站留下深刻的印象。本实例将介绍通过JavaScript调用网页助手小精灵的方法。

2.技术要点

本实例主要通过Microsoft的ActiveX组件Microsoft Agent实现。Microsoft Agent提供了很多控制Agent角色的方法,下面进行详细介绍。

a. Load()方法:用于读入要使用的角色,该方法包括两个参数,一个用于指定角色的姓名,另一个用于指定角色存储的文件。

b. Show()方法:用于使角色显示在屏幕上。

c. Hide()方法:用于隐藏角色。

d. Speak()方法:用于实现角色说话,该方法有一个参数,用于指定说话的内容。

e. MoveTo ()方法:用于将角色移动到屏幕的指定位置,该方法有两个参数,一个用于指定x轴的坐标,另一个用于指定y轴的坐标。

f. Play()方法:用于指定要播放的动画,该方法只有一个参数,用于指定表示动画的字符串,其值包括Announce、Explain、Congratulate、greet、Gestureright、Gestureleft、Gesturedown、Gestureup、Pleased和Read等。

3.具体实现

(1)在需要显示网页助手小精灵的页面的<head>标记中,编写自定义的JavaScript函数loadAgent(),用于装入要使用的角色。loadAgent()函数的具体代码如下:

<script language="javascript">
function loadAgent(id){
      try{
            id=new ActiveXObject("Agent.Control.2");                         //创建一个ActiveX控件
            id.Connected = true;
            id.Characters.Load("MrAgent","merlin.acs");                             //装入要使用的角色
            return id;
      }catch (err){
            return false;
      }
}
</script>

(2)loadAgent()函数的后面编写一个自定义的JavaScript函数controlAgent(),用于调用并控制网页助手小精灵,controlAgent()函数的具体代码如下:

function controlAgent(){
      if (agent=loadAgent("agent")){
            var mrAgentID="MrAgent";
            mrAgent = agent.Characters.Character(mrAgentID);                  //获取助手对象
            mrAgent.MoveTo(200,200);                                              //移动助手
            mrAgent.Show();                                                     //显示助手
            mrAgent.Play("Explain");                                                  //做解释的手势
            mrAgent.Speak("欢迎来到明日科技网站!");                          //提示语
            mrAgent.Play("Gestureright");                                                  //右手做手势
            mrAgent.Play("Pleased");                                                  //做请的手势
            mrAgent.Speak("我们的网址:www.cccxy.com");                  //提示语
            mrAgent.Hide();                                                        //隐藏助手
            mrAgent.MoveTo(600,300);                                              //移动助手
            mrAgent.Show();                                                             //显示助手
            mrAgent.Play("Explain");                                                  //做解释的手势
            mrAgent.Play("Read")                                                       //作出读书的动作
            mrAgent.Speak("我们会热心解决您学习过程中遇到的疑问");  //提示语
            mrAgent.Play("Idle1_1");                                                  //做出无所事事的样子
            mrAgent.Play("Gestureright");                                                  //右手做手势
            mrAgent.Speak("记住我们的网址:www.cccxy.com");                  //提示语
            mrAgent.Play("greet");                                                      //问候
            mrAgent.Speak("感谢您的到来");                                            //提示语
            mrAgent.Play("Idle2_2");                                                  //做出无所事事的样子
            mrAgent.Hide();                                                              //隐藏助手
      }
}

(3)编写JavaScript代码,实现在页面载入后调用并控制网页助手小精灵,具体代码如下:

window.onload=function(){
      controlAgent();                                                               //调用并控制网页助手小精灵
}
时间: 2024-10-10 14:58:28

导航条——调用网页助手小精灵的相关文章

JS实现 网页下拉一段后固定导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性

会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. 假如要布局出这样简单导航条效果 比如以下代码: 1.可以使用Ul li布局导航条 <ul> <li><a href="http://www.divcss5.com/">网站首页</a> <li><a href="

Js控制网页滑动的时候顶部导航条变成半透明实例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <!--引入jQuery--> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> <title>Js控制网页滑动的时候顶部导航条变

网页设置导航条

如果浏览器可使用HTML5,则使用<nav>标签(IE9+支持):若要兼容低版本浏览器,就要使用<div>标签. 垂直的导航条 1 /*list-style:none;是清除ul标签自带的样式,不设置高度height是因为可以靠li来撑开*/ 2 ul{list-style:none;width:100px;} 3 /*text-decoration:none;清除a标签的下划线:display:block;将a标签变成块元素,这样才能给a标签设置宽高和背景*/ 4 a{text-

神奇的Bootstrap 导航条 全面实战篇

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/52056377 导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接.表单.表单和导航一起结合等多种形式. 1.实战一-带二级菜单和表单的导航条 <!DOCTYPE HTML> <html> <head> &l

导航条——展开式导航条

1.概述 对于一个企业网站来说,“联系我们”超链接是必不可少的.为了更加引人注意,可以将其制作成具有展开式动画效果的导航条.运行本实例,读者可以看到页面右侧的“联系我们”导航条是慢慢展开的,并且每次刷新页面时,都会以同样的动画效果展开. 2.技术要点 本例主要通过自定义JavaScript函数ourmove()控制Image对象的height属性值实现的.为了实现动画效果,在JavaScript函数中还需要应用setTimeout()方法延迟执行改变图片高度的操作. 3.具体实现 (1)在网页中

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

iOS:导航条滚动透明度随着tableView的滚动而变化

来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如美团外卖的首页模块,新浪微博的个人详情页面.要怎么样才能快速的实现这个功能呢!那下面由笔者来告诉你如何三行代码,集成这个功能... 原理介绍: 要想把一个view设计成透明的我们一下子就会想到两种方案,设置view的alpha值为0,或者设置view的backgroundColor为clearCol

Bootstarp学习(十一)导航条

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.在这一节中将一起探讨Bootstrap框架中导航条的使用. 导航条和导航一样,在Bootstrap框架中是一个独立组件,所以你也可以根据自己的需求使用不同的版本: LESS版本:对应的源文件navbar.less S