编程 Javascript

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

Posted in Javascript onJuly 27, 2015

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿新浪微博搜索框弹出的效果</title>
<style type="text/css">
body{font-size:12px;}
.weibo{width:500px; height:200px; position:relative;}
.so{width:200px; height:24px; margin:30px;}
.so #s_so{width:100px; border:1px solid #ccc; line-height:20px; height:20px;}
#show{display:none; position:absolute; top:0px; left:10px; width:200px; height:60px; background:#fff; font-size:12px; border:1px solid #ccc; padding:10px;}
#show span{margin-left:120px; color:#F00; cursor:pointer;}
</style>
</head>
<body>
<script type="text/javascript">
var $=function (id){
  return document.getElementById(id);
  }
function s_show(){
$('s_so').value="";
$("show").style.display='block';
$("b_so").focus(); 
}
function closed(){
$("show").style.display='none';
$('s_so').value="搜索他说的话";
}
</script>
<div class="weibo">
  <div class="so">
  <form>
  <input type="text" value="搜索他说的话" onfocus="s_show()" id="s_so"/>
  <input type="submit" value="查找" />
  </form>
  </div>
  <div id="show">
  <p>搜索他说的话<span onclick="closed()">X</span></p>
  <form>
   <input type="text" value="" id="b_so"/><input type="submit" value="查找" />
  </form>
  </div>
</div>
</body>
</html>

运行效果如下：

希望本文所述对大家的javascript程序设计有所帮助。

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

- Author -

挨踢骑术

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 表单验证常见正则

Sep 28 Javascript

jquery显示loading图片直到网页加载完成的方法

Jun 25 Javascript

jquery实现具有收缩功能的垂直导航菜单

Feb 16 Javascript

javascript拖拽应用实例（二）

Mar 25 Javascript

jQuery基本筛选选择器实例代码

Feb 06 Javascript

js实现下一页页码效果

Mar 07 Javascript

javascript json字符串到json对象转义问题

Jan 22 Javascript

js中的this的指向问题详解

Aug 29 Javascript

解决layui数据表格table的横向滚动条显示问题

Sep 04 Javascript

JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

Apr 28 Javascript

JavaScrip如果基于url实现图片下载

Jul 03 Javascript

javascript实现计算器功能详解流程

Nov 01 Javascript

JavaScript动态提示输入框输入字数的方法

Jul 27 #Javascript

JQUERY实现网页右下角固定位置展开关闭特效的方法

Jul 27 #Javascript

JQ技术实现注册页面带有校验密码强度

Jul 27 #Javascript

jquery实现TAB选项卡鼠标经过带延迟效果的方法

Jul 27 #Javascript

在for循环中length值是否需要缓存

Jul 27 #Javascript

jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法

Jul 27 #Javascript

jQuery实现图片与文字描述左右滑动自动切换的方法

Jul 27 #Javascript