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程序设计有所帮助。

Javascript 相关文章推荐
Extjs4中的分页应用结合前后台
Dec 13 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
Java File类的常用方法总结
Mar 18 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
vuex与组件联合使用的方法
May 10 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php实现的农历算法实例
2015/08/11 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
[JS]点出统计器
2020/10/11 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python实现根据文件格式分类
2019/10/31 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
体育馆的标语
2014/06/24 职场文书
校运会通讯稿
2015/07/18 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
深入浅析React中diff算法
2021/05/19 Javascript
Python List remove()实例用法详解
2021/08/02 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang