基于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 相关文章推荐
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
jquery不常用方法汇总
Jul 26 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
基于JavaScript 实现拖放功能
Sep 12 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
Terran魔法科技
2020/03/14 星际争霸
PHP动态图像的创建
2006/10/09 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
JS 控件事件小结
2012/10/31 Javascript
浅谈js中的闭包
2015/03/16 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
数控专业应届生求职信
2013/11/27 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
python基础之停用词过滤详解
2021/04/21 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript