基于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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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中try catch捕获异常实例详解
2014/11/21 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python如何让类支持比较运算
2018/03/20 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python 编程速成(推荐)
2019/04/15 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
婚礼主持词
2014/03/13 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
python基础详解之if循环语句
2021/04/24 Python
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS