MSAgentStyleCrittersforyourWebPages资源-CSDN文库

共7个文件

js：3个

gif：3个

html：1个

需积分: 3 7 浏览量 2008-10-23 16:50:27 上传评论收藏 28KB ZIP 举报

标题“MSAgent Style Critters for your Web Pages”指的是在网页中使用类似微软Agent技术的动态小动物图形元素。这些小动物通常被设计成互动式的，为网站增添趣味性和交互性，提升用户体验。MSAgent是微软早期推出的一种技术，它允许在Windows系统中创建交互式的人物角色，能够读出屏幕上的文本并进行简单的动作。描述中的信息虽然简洁，但暗示了这个压缩包可能包含了一系列这样的互动小动物图像资源和相关的脚本文件。"Critters"标签进一步明确了这些元素的主题，即网页上的小动物形象。从压缩包子文件的文件名称列表来看，我们可以推断出以下内容： 1. **penguin.gif, monkey.gif, bubble.gif**：这些是GIF格式的图像文件，很可能代表了三种不同类型的互动小动物，分别是企鹅、猴子和一个可能带有气泡效果的形象。GIF格式支持动画，因此它们可能是可以动起来的动态图像，用于网页上的互动展示。 2. **example.html**：这是一个HTML文件，很可能是展示如何在网页上使用这些 Critters 的示例代码。通过查看这个文件，开发者可以学习如何将这些动态元素集成到他们的网页设计中。 3. **jcritter.js, jcritter-mini.js, jcritter-micro.js**：这些都是JavaScript文件，用于实现 Critters 的交互功能。主文件可能是`jcritter.js`，而`jcritter-mini.js`和`jcritter-micro.js`可能是其轻量级或优化过的版本，适合对性能有更高要求或者需要减少页面加载时间的场景。JavaScript代码会处理用户与这些小动物的交互，如鼠标悬停、点击等事件，并可能包含控制动画播放、响应用户输入的逻辑。在实际应用中，这些 Critters 可能被用于网站的欢迎界面、导航辅助、或者作为某种反馈机制的一部分，比如在用户完成特定操作后出现的庆祝动画。开发人员需要了解基本的HTML和JavaScript知识，以便将这些元素插入到自己的网页模板中，并通过修改JavaScript代码来调整它们的行为和互动模式。此外，为了兼容不同的浏览器，他们还需要考虑跨浏览器的适配问题，确保所有用户都能看到并享受这些互动效果。

资源推荐

资源详情

资源评论

收起资源包目录

MSAgent Style Critters for your Web Pages.zip （7个子文件）

jcritter-micro.js 3KB

jcritter.js 8KB

monkey.gif 5KB

penguin.gif 14KB

jcritter-mini.js 5KB

bubble.gif 3KB

example.html 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title> <script src="jcritter-micro.js" type="text/javascript"></script> <script type="text/javascript"> //This isn't necessarily the CORRECT way to do this. Ideally //you want to be using attachEvent or addEventListener instead of //directly assigning functions to your links below. var myCritter; var penguin; window.onload = function() { var monkey = { width: 128, height: 128, src: 'monkey.gif', adjustTop: 15, adjustLeft: 20, speechTop: 45, speechLeft: 65 } penguin = { width: 128, height: 128, src: 'penguin.gif', adjustTop: 15, adjustLeft: 20, speechTop: 25, speechLeft: 65 } myCritter = new JCritter(monkey); myCritter.draw(); myCritter.show(); myCritter.onClick = function() { myCritter.say('Stop clicking me!'); myCritter.onClick = function() { myCritter.say('I said stop it!'); } } } </script> </head> <body onunload="myCritter.destroy()" style="background-color:#FFB27F"> <div> <input type="text" id="foo"/><button onclick="if(document.getElementById('foo').value.match(/^\s*$/)){myCritter.say('You have to type <b>WORDS</b>, you banana head.')}else{myCritter.say(document.getElementById('foo').value)}">Say</button> <br/>Try these other commands too!<br/> <a href="#" onclick="myCritter.hide();return false;">Hide</a><br/> <a href="#" onclick="myCritter.show();return false;">Show</a><br/> <a href="#" onclick="myCritter.hush();return false;">Hush</a><br/> <a href="#" onclick="myCritter.mute();return false;">Mute</a><br/> <a href="#" onclick="myCritter.unMute();return false;">UnMute</a><br/> <a href="#" onclick="myCritter.setAgent(penguin);return false;">SetAgent(change to Penguin)</a><br/> <a href="#" onclick="myCritter.destroy();return false;">Destroy</a> </div> <div style="width:900px;height:1000px;">This is a really tall and wide div to demonstrate position: fixed Ready? Go! Mooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div> </body> </html>

评论收藏

内容反馈