控制台打印文字效果js插件-typed.js_htmltyped.js资源-CSDN文库

共15个文件

js：3个

css：3个

html：2个

需积分: 14 110 浏览量 2019-12-11 20:22:53 上传评论收藏 95KB ZIP 举报

**标题解析：** "控制台打印文字效果js插件-typed.js" 指的是一种JavaScript插件，名为`typed.js`，它的主要功能是模拟控制台中的文字打印效果，为网页添加动态输入的视觉体验。 **描述分析：** 描述中提到，`typed.js`是一个灵活的工具，允许开发者自定义要显示的文字内容、打印速度以及其他相关参数，从而创造出与真实打印机类似的文字动画。这种效果在网页设计中常用于吸引用户注意力或作为交互式的元素。 **标签解析：** "jQuery库" 表明`typed.js`是基于jQuery构建的，这意味着它利用了jQuery的便利性，简化了DOM操作和事件处理，使得开发者能更方便地集成和使用这个插件。 **内容展开：** 1. **jQuery库的介绍：** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，大大降低了前端开发的复杂度。`typed.js`利用jQuery的这些特性，确保了在不同浏览器上的兼容性和高效性能。 2. **`typed.js`的基本使用：** 需要在项目中引入jQuery和`typed.js`的库文件。然后，通过JavaScript代码创建一个`Typed`实例，并配置相应的选项，如字符串数组（要打印的文字）、速度、回删速度、暂停时间等。 ```html <script src="https://code.jquery.com/jquery-3.x.min.js"></script> <script src="path/to/typed.js"></script> <script> $(function() { var typed = new Typed('#yourElement', { strings: ['Hello, world!', 'Welcome to my website.'], typeSpeed: 50, backSpeed: 30, pauseOnFocus: true }); }); </script> ``` 3. **插件特性：** - **字符串数组：** 可以设置多个字符串，`typed.js`会在它们之间切换，模拟连续打印的效果。 - **类型速度和回删速度：** 这两个参数分别控制文字显示和删除的速度，可以通过调整数值来实现不同的动画效果。 - **暂停与恢复：** 可以设定是否在焦点丢失时暂停打印，增强用户体验。 - **其他选项：** 包括起始延迟、循环次数、是否清除之前内容等，可进一步定制打印行为。 4. **实际应用：** `typed.js`适用于网页的欢迎语、产品介绍、动态标语等场景，可以增加网页的互动性和趣味性，提升用户停留时间。 5. **兼容性和优化：** 虽然`typed.js`依赖jQuery，但随着现代前端框架的普及，可能需要考虑与React、Vue、Angular等框架的集成。开发者需要注意在框架中正确引入和使用jQuery插件，或者寻找框架内的替代解决方案。 6. **进阶技巧：** 除了基本用法，还可以结合CSS动画和JavaScript事件监听，创建更复杂的交互效果，比如在特定事件触发打印，或者与其他页面元素联动。 7. **版本更新与社区支持：** 开源项目通常会有持续的维护和更新，`typed.js`也不例外。开发者应关注项目的GitHub仓库或官方文档，获取最新版本和社区提供的使用技巧。通过以上分析，我们可以看出`typed.js`是一个强大的JavaScript插件，它通过jQuery库实现了控制台风格的文字打印效果，为网页设计师提供了创新的表达方式。了解并熟练使用`typed.js`，可以为网站增添独特的动态元素，提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

201704141456.zip （15个子文件）

201704141456

index.html 4KB

jquery-1.11.0.min.js 94KB

typed.js 14KB

2.jpg 17KB

1.jpg 35KB

fonts

icomoon.woff 1KB

icomoon.ttf 1KB

icomoon.svg 2KB

icomoon.eot 2KB

jQuery之家.url 268B

readme.html 865B

dist

typed.min.js 5KB

css

normalize.css 2KB

main.css 475B

htmleaf-demo.css 6KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>控制台打印文字效果js插件-typed.js|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link href="css/main.css" rel="stylesheet"/> <style type="text/css"> /* code for animated blinking cursor */ .typed-cursor{ opacity: 1; font-weight: 100; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; -ms-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .typed-fade-out{ opacity: 0; animation: 0; transition: opacity .25s; } </style> </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1> 控制台打印文字效果js插件-typed.js <span>A jQuery typing animation script</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Text-Link-Effects/201704144455.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="wrap"> <h1 class="h1">Typed.js</h1> <div class="type-wrap"> <div id="typed-strings"> <span>Typed.js is a <strong>JavaScript</strong> library.</span> <p>It <em>types</em> out sentences.</p> <p>And then deletes them.</p> <p>Try it out!</p> <p>生命苦短，我用python。</p> </div> <span id="typed" style="white-space:pre;"></span> </div> </div> <div class="related"> <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3> <a href="http://www.htmleaf.com/jQuery/Layout-Interface/201507092195.html"> <img src="related/1.jpg" width="300" alt="高仿真的Ubuntu控制台键入和输出指令动画特效"/> <h3>高仿真的Ubuntu控制台键入和输出指令动画特效</h3> </a> <a href="http://www.htmleaf.com/jQuery/Text-Link-Effects/201507052169.html"> <img src="related/2.jpg" width="300" alt="超逼真的控制台打字jQuery特效"/> <h3>超逼真的控制台打字jQuery特效</h3> </a> </div> </div> <script src="js/typed.js" type="text/javascript"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function(){ Typed.new("#typed", { stringsElement: document.getElementById('typed-strings'), typeSpeed: 30, backDelay: 500, loop: false, contentType: 'html', // or text // defaults to null for infinite loop loopCount: null, callback: function(){ foo(); }, resetCallback: function() { newTyped(); } }); var resetElement = document.querySelector('.reset'); if(resetElement) { resetElement.addEventListener('click', function() { document.getElementById('typed')._typed.reset(); }); } }); function newTyped(){ /* A new typed object */ } function foo(){ console.log("Callback"); } </script> </body> </html>

评论收藏

内容反馈