JavaScript與jQuery實(shí)現(xiàn)的閃爍輸入效果
更新時(shí)間：2016年02月18日 09:43:11 作者：The-duke
這篇文章主要介紹了JavaScript與jQuery實(shí)現(xiàn)的閃爍輸入效果,結(jié)合實(shí)例形式分別分析了JavaScript與jQuery實(shí)現(xiàn)閃爍輸入效果的方法與具體使用技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript與jQuery實(shí)現(xiàn)的閃爍輸入效果。分享給大家供大家參考，具體如下：
html部分
<div id="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代碼自動(dòng)閃爍輸入</p> <p>*/</p> 2014-2-14,I want to say:<br /> Baby, I love you forever!<br /> </div>
js部分
function typewriter(id){
var $ele = document.getElementById(id);
var str = $ele.innerHTML, progress = 0;
$ele.innerHTML = '';
var timer = setInterval(function() {
var current = str.substr(progress, 1);
if (current == '<') {
progress = str.indexOf('>', progress) + 1;
} else {
progress++;
}
$ele.innerHTML =str.substring(0, progress) + (progress & 1 ? '_' : '');
if (progress >= str.length) {
clearInterval(timer);
}
}, 75);
}
使用方法：
typewriter("code");
弄成個(gè)jquery插件
(function($) {
$.fn.typewriter = function() {
var $ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
var timer = setInterval(function() {
var current = str.substr(progress, 1);
if (current == '<') {
progress = str.indexOf('>', progress) + 1;
} else {
progress++;
}
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
if (progress >= str.length) {
clearInterval(timer);
}
}, 75);
};
})(jQuery);
使用方法 ：
$("#code").typewriter();
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript擴(kuò)展技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》及《javascript面向?qū)ο笕腴T教程》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS CSS制作飽含熱情的鑲邊文字閃爍特效
- AngularJS頁面訪問時(shí)出現(xiàn)頁面閃爍問題的解決
- js實(shí)現(xiàn)文字閃爍特效的方法
- JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法
- JS實(shí)現(xiàn)的網(wǎng)頁背景閃電閃爍效果代碼
- JS實(shí)現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動(dòng)色塊的方法
- js實(shí)現(xiàn)div閃爍原理及實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)的標(biāo)題欄新消息閃爍提示效果
- 利用JS實(shí)現(xiàn)瀏覽器的title閃爍
- JavaScript 平滑文字閃爍
- 高亮閃爍某個(gè)元素的js腳本
- JS+CSS實(shí)現(xiàn)閃爍字體效果代碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Js獲取當(dāng)前日期時(shí)間及格式化代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
js微信應(yīng)用場(chǎng)景之微信音樂相冊(cè)案例分享
這篇文章主要為大家分享了js微信應(yīng)用場(chǎng)景之微信音樂相冊(cè)案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript中的幾個(gè)關(guān)鍵概念的理解-原型鏈的構(gòu)建
JavaScript中的prototype，標(biāo)準(zhǔn)翻譯為“原型”，表示對(duì)象的初始形態(tài)2011-05-05
JS利用正則表達(dá)式實(shí)現(xiàn)簡(jiǎn)單的密碼強(qiáng)弱判斷實(shí)例
這篇文章主要給大家介紹了關(guān)于JS利用正則表達(dá)式實(shí)現(xiàn)簡(jiǎn)單的密碼強(qiáng)弱判斷的相關(guān)資料，實(shí)現(xiàn)后的效果非常簡(jiǎn)單，但也挺實(shí)用的，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-06-06
下面小編就為大家?guī)硪黄狫S三目運(yùn)算(三元運(yùn)算)方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
主要用到了js的dom操作，用到了rows 集合。2009-12-12
這篇文章主要為大家詳細(xì)介紹了js如何實(shí)現(xiàn)檢測(cè)用戶輸入密碼強(qiáng)度，從四個(gè)方面檢測(cè)用戶輸入的密碼的強(qiáng)度的，感興趣的小伙伴們可以參考一下2015-10-10
JavaScript 以對(duì)象為索引的關(guān)聯(lián)數(shù)組
我們常說JavaScript原生支持json，因?yàn)槲覀兛梢哉J(rèn)為json就是對(duì)JavaScript的Object對(duì)象的靈活應(yīng)用。2010-05-05
本文總結(jié)了5種javascript與CSS交互的方法，都是平時(shí)項(xiàng)目中經(jīng)常用到的，這里推薦給大家2014-12-12
基于Bootstrap實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了基于BootStrap實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11