foxholder.js是一款表单占位符placeholder动画jquery插件。该placeholder动画共有15种动画效果,它使用简单,兼容性好,值得推荐。foxholder.js插件的特点还有:
- 可以执行平滑和性能优化的CSS3 placeholder动画。
- 15种不同的placeholder动画特效。
- 兼容IE 9+, Safari 9+, FF, Opera, Chrome, Edge等主流浏览器。
使用方法
在页面中引入foxholder-styles.css,jquery和foxholder.js文件。
<link href="path/to/css/foxholder-styles.css" rel="stylesheet"> <script src='path/to/js/jquery.min.js'></script> <script src='path/to/js/foxholder.js'></script>
HTML结构
使用foxholder.js插件的placeholder占位符动画的基本HTML结构如下:
<div class="your-class"> <form> <input id="your-id-1" type="text" placeholder="My Input" /> <textarea id="your-id-2" placeholder="My Textarea"></textarea> <button type="submit">提交</button> </form> </div>
需要注意的是,提交按钮只能使用<button>
按钮。
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该placeholder占位符动画插件。
jQuery('.your-class').foxholder({ demo: 1 //or other number of demo (1-15) you want to use });
foxholder.js placeholder占位符动画插件的github地址为:https://github.com/eisenfox/foxholder
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!