基于JS实现导航条之调用网页助手小精灵的方法


Posted in Javascript onJune 17, 2016

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();                                //调用并控制网页助手小精灵
}

以上所述是小编给大家介绍的基于JS实现导航条之调用网页助手小精灵的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
基于JS实现导航条flash导航条
Jun 17 #Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 #Javascript
Javascript中的数组常用方法解析
Jun 17 #Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 #Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 #Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 #Javascript
jQuery实现区域打印功能代码详解
Jun 17 #Javascript
You might like
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP之header函数详解
2021/03/02 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
js转html实体的方法
2016/09/27 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
如何在django中实现分页功能
2020/04/22 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
大学学习计划书范文
2014/05/02 职场文书
三好生演讲稿
2014/09/12 职场文书
租房协议书范例
2014/10/14 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
Nginx反向代理学习实例教程
2021/10/24 Servers
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python