superplaceholder.js说明
superplaceholder.js 是一款带演示功能的超级输入框占位符 JavaScript 插件。superplaceholder.js 可以让占位文本动起来,它能够周期性的循环显示预定义的文本字符串,增强提示功能,提升用户体验。
效果可以看白露博客的侧边搜索栏,里面的占位文本是动态的,就是利用superplaceholder.js做出来的。

superplaceholder.js演示代码
<script type="text/javascript" src="http://blmoe.cn/wp-content/themes/xiu/js/superplaceholder.js"></script>
<script>
superplaceholder({
el:sou,//这里是指你输入框的ID
sentences:['找不到资源?','请学会用网站的搜索功能','搜不到?','请选择正确的关键词','例如:织梦模板...'],
options:{
letterDelay:100,//每句间隔时间
loop:true,//循环上面的句子
startOnFocus:false//在输入框聚焦时才开始播放,设置为 false 会自动开始播放
}
});
</script>
上面你可以自己修改参数,白露对 superplaceholder.js 相应的代码都做出来说明,是不是很贴心?赶快试试吧!
superplaceholder.js更多参数说明
letterDelay:各个字符显示之间的延迟时间,单位毫秒
sentenceDelay:各个句子之间的延迟时间,单位毫秒
startOnFocus:在输入框聚焦时才开始播放,设置为 false 会自动开始播放
loop:是否循环播放
shuffle:是否打乱传入的句子
showCursor:是否显示光标,默认为显示
cursor:光标字符串
superplaceholder.js配置参数
superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Something to show', 'Another thing to show'],
options: {
// delay between letters (in milliseconds)
letterDelay: 100, // milliseconds
// delay between sentences (in milliseconds)
sentenceDelay: 1000,
// should start on input focus. Set false to autostart
startOnFocus: true,
// loop through passed sentences
loop: false,
// Initially shuffle the passed sentences
shuffle: false,
// Show cursor or not. Shows by default
showCursor: true,
// String to show as cursor
cursor: '|'
}
});
superplaceholder.js教程结束,白露只要有好的前端插件,都会分享给大家的~ 欢迎关注我!
猜你喜欢