JS+CSS实现仿新浪微博搜索框的方法


Posted in Javascript onFebruary 24, 2015

本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下:

<!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" xml:lang="en">

<head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

 <title>JS+CSS仿类似新浪微博搜索框的效果</title>

 <style type="text/css">

 * { padding:0; margin:0;}

 body { font-size:14px; }

 #box { width:600px; margin:40px auto;}

 #in { width:240px; height:24px; line-height:24px; border:1px solid #369; border-radius:4px; box-shadow:inset 0 0 2px #999; }

 #suggest { display:none; position:relative; margin-top:-1px; width:240px; padding-top:1px; border:1px solid #369; border-top:0 none;

border-radius:4px; box-shadow:inset 0 0 2px #999; overflow:hidden; }

 #suggest a { display:block; color:#f00; height:24px; line-height:24px; text-decoration:none; padding:0 4px;}

 #suggest a:hover { background:#eee;}

 #suggest a span { color#369;}

  </style>

  <script type="text/javascript">

 window.onload=function(){

 //声明一坨变量供下面使用

 var obox=document.getElementById("box");

 obj=document.getElementById("in");

 osug=document.getElementById("suggest");

 oa=osug.getElementsByTagName("span");

//兼容ie和火狐浏览器的方式,但是经测试发现ie678可以ie9却不行在删除的时候无法触发,网上查下说有ie9这个问题

 obj.oninput=obj.onpropertychange=onchange;

 function onchange(){

  var txt=this.value;

  var words=txt.length;

  if(words==0){

   osug.style.display="none";

  }else if(words<=8){

   osug.style.display="block";

   for( var i=0;len=oa.length,i<len;i++){

    oa[i].innerHTML=txt;

   }

  }else if(words>8){

   osug.style.display="block";

   var limit=txt.substring(0,8)+"...";

   for( var i=0;len=oa.length,i<len;i++){

    oa[i].innerHTML=limit;

   }

  }

 }

}

function disbox(){

   document.getElementById("suggest").style.display="none";

  }

</script>

</head>

<body>

 <dl id="box">

  <dt><input onblur="disbox()" type="text" name="" id="in" /></dt>

  <dd id="suggest" >

        <a href="###">搜“<span></span>”相关微博</a>

        <a href="###">搜“<span></span>”相关用户</a>

  </dd>

 </dl>

</body>

</html>

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

Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
JS出现失效的情况总结
Jan 20 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 #Javascript
JS给超链接加确认对话框的方法
Feb 24 #Javascript
javascript实现图片循环渐显播放的方法
Feb 24 #Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 #Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 #Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 #Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 #Javascript
You might like
php获得当前的脚本网址
2007/12/10 PHP
php google或baidu分页代码
2009/11/26 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
javascript history对象详解
2017/02/09 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
详解Python IO口多路复用
2020/06/17 Python
租房协议书
2014/04/10 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
企业金融服务方案
2014/06/03 职场文书
机械专业求职信范文
2014/07/15 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis