基于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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
javascript常用的设计模式
Feb 09 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
Python lxml模块安装教程
2015/06/02 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python logging模块的使用
2020/09/07 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
竞聘演讲稿开场白
2014/08/25 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
大学生英文求职信范文
2015/03/19 职场文书
如何写观后感
2015/06/19 职场文书
培训感想范文
2015/08/07 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python