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插件之自动添加删除行功能介绍
Oct 14 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
给js文件传参数(详解)
Jul 13 Javascript
js简单抽奖代码
Jan 16 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
javascript History对象原理解析
Feb 17 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python中Apriori算法实现讲解
2017/12/10 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python pillow模块使用方法详解
2019/08/30 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
关于迟到的检讨书
2014/01/26 职场文书
小学生作文评语大全
2014/04/21 职场文书
个人欠款担保书
2014/05/20 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫