基于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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
js实现select跳转功能代码
Oct 22 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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;&amp;mysql)三
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
React Native预设占位placeholder的使用
2017/09/28 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
介绍一下write命令
2012/09/24 面试题
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
社区灵活就业证明
2014/11/03 职场文书
Django实现聊天机器人
2021/05/31 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android