基于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 相关文章推荐
IE的fireEvent方法概述及应用
Feb 22 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
移动端界面的适配
Jan 11 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
element跨分页操作选择详解
Jun 29 Javascript
Vue 数据绑定的原理分析
Nov 16 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+ajax实现无刷新分页的方法
2014/11/04 PHP
php处理复杂xml数据示例
2016/07/11 PHP
json跟xml的对比分析
2008/06/10 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
js实现简易ATM功能
2020/10/27 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python3 实现口罩抽签的功能
2020/03/11 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
python 如何设置守护进程
2020/10/29 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
英语自我评价范文
2014/01/24 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
热门专业求职信
2014/05/24 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
婚内分居协议书范文
2014/11/26 职场文书
交通事故被告代理词
2015/05/23 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python