js实现京东快递单号查询

本文实例为大家分享了js实现京东快递单号查询的具体代码,供大家参考,具体内容如下
【js实现京东快递单号查询】1.实现效果:
js实现京东快递单号查询
文章图片

当文本框中输入文字时,上面有一个放大文字的框中显示文本框内容。失去焦点时,放大文字的框消失,获得焦点时,放大文字的框显示。
2.案例分析
js实现京东快递单号查询
文章图片

3.代码实现

模拟京东快递单号查询* {padding: 0; margin: 0; }.search {position: relative; width: 178px; margin: 100px; }.con {display: none; position: absolute; top: -40px; width: 171px; border:1px solid rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); /* 阴影*/padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; }/* 小三角 :伪元素*/.con::before {content: ''; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent; /* 三个值分别是 上:左右:下*/}123

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读