网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

jQuery文本框输入文字放大预览

时间:2024-10-27 14:51:12

1、新建html文档。

jQuery文本框输入文字放大预览

2、书写hmtl代码。<div class="fill_ipt"><input type="text" class="showbig" name="" id="" value="" placeholder="在这里输入" /></div>

jQuery文本框输入文字放大预览

3、书写css代码。<style>.fill_ipt { position: relative; margin: 200px 0 0 500px; }.showbig { display: block; width: 400px; height: 40px; border: 1px solid #404040; }input { display: block; width: 100%; height: 100%; outline: none; border: none; text-indent: 20px; }.bigtx { height: 30px; min-width: 10px; line-height: 30px; padding: 0px 8px; border: 1px solid #C9CFDA; background: #f5f7fc; box-shadow: 0 0 10px rgba(120,144,156,0.2); position: absolute; left: 0; top: -0px; font-size: 24px; color: #1c2b36; line-height: normal; /*display: none;*/opacity: 0; transition: all 0.2s; }.bigtx span { font-size: 24px; color: #1c2b36; }</style>

jQuery文本框输入文字放大预览

4、书写并添加js代码。<script src="js/jquery.min.js"></script>

jQuery文本框输入文字放大预览

5、代码整体结构。

jQuery文本框输入文字放大预览

6、查看效果。

jQuery文本框输入文字放大预览
© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com