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 相关文章推荐
jQuery实现hover合成事件的方法
Aug 06 Javascript
动态加载js、css的实例代码
May 26 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
destoon官方标签大全
2014/06/20 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python ansible服务及剧本编写
2017/12/29 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python之生成多层json结构的实现
2020/02/27 Python
python要安装在哪个盘
2020/06/15 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
大学生个人先进事迹材料范文
2014/05/03 职场文书
项目经理任命书
2014/06/04 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
保留意见审计报告
2015/06/05 职场文书