基于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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
js字符编码函数区别分析
Jun 05 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
基于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
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python守护线程用法实例
2017/06/23 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
值得收藏的10道python 面试题
2019/04/15 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
自荐信包含哪些内容
2013/10/30 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
就业协议书怎么填
2014/04/11 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
连带责任保证书
2014/04/29 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
超市采购员岗位职责
2015/04/07 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers