首页 > 想要在网站加个百度搜索栏,但是现在的输入框不好看。

想要在网站加个百度搜索栏,但是现在的输入框不好看。

我想做个这种输入框:
最初是个猴子,点击后猴子就预留出一个小格子让输入文本,同时弹出了输入键盘,随着输入的文本的增多,猴子就一直往前走,留出越来越多的空间给输入的文本,一直到一定长度,猴子会停下来,换个动作,但是文本可以继续输入。点击猴子或者键盘回车,就可以进入搜索页。
请问,这个应该怎么入手去做呀?

补充一点,是移动端的。


你的这个问题跨度蛮大的,首先你要有猴子,
如果你的动画要纯js来做的话猴子要拆分部件
或者你可以用gif,
那你可能就需要一个美工帮你画猴子,
多张猴子图片之后叫人做成gif动画。
然后回到网页上,你需要一个input输入框
开始输入框是隐藏的,用css控制输入框的属性 『display:none』
之后猴子的图片加上onlick监听点击,触发函数将输入框的 display改成block,再定一个min-width
再给输入框加一个event listener,监听key up和key down,让猴子图片的gif动起来
用timeout来判断用户停止输入,让猴子动画停止,或者照你说换一个gif让猴子做不一样的动作
然后给input输入框加一个event listener监听key enter,用户回车,跳转到结果页面


1、把需要的几个 GIF 动画做好。
2、监听输入文字长度。
3、根据长度执行相应的 GIF 动画,主要是动态改变 gif 的位置和加载不同的 gif 。
4、监听输入行为的停止,停止动画。
5、如果用户继续输入,跳到2。
挺简单的。

【热门文章】
【热门文章】