宝哥软件园

javascript实现类似于新浪微博搜索框弹出效果的方法

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

本文实例讲述了爪哇岛描述语言实现类似于新浪微博搜索框弹出效果的方法。分享给大家供大家参考。具体实现方法如下:

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;字符集=GB 2312/标题仿新浪微博搜索框弹出的效果/title style type=' text/CSS ' body { font-size :12 px;}.微博{宽度:500像素高度:200 px位置:相对;}.所以{ width :200 pxh three :24 pxmargin :30 px }。so # s _ so { width :100 pxborder :1 px固体# ccc线高:20 px高度:20 px} # show { display:none位置:绝对;top:0pxleft:10px宽度宽度:200像素高度:60 px背景# ff font-size :12 px;border:1px固体# cccpadding :10 px } # show span { margin-left :120 px;颜色: # f00光标:指针指针;}/style/head dyscript type=' text/JavaScript ' var $=function(id){ return document。getelementbyid(id);}函数s_show(){$('s_so ').值=' ';$(“显示”)。风格。display=" block$('b_so ').焦点();}函数closed(){ $(“show”)。风格。display=" none$('s_so ').值='搜索他说的话;}/脚本div class=' Weibo ' div class=' so '表单输入类型='text '值='搜索他说的话onfocus=' s _ show()' id=' s _ so '/input type=' submit ' value='查找//form /div div id='show' p搜索他说的话span onclick='closed()'X/span/p表单输入类型=' text '值=' id=' b _ so '/输入类型='submit '值='查找//表单/div/正文/html运行效果如下:

希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。

更多资讯
游戏推荐
更多+