编程 Javascript

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

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

- Author -

代码家园

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

Javascript 相关文章推荐

用正则xmlHttp实现的偷(转)

Jan 22 Javascript

Javascript 入门基础学习

Mar 10 Javascript

探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行

Jul 09 Javascript

JavaScript定义类的几种方式总结

Jan 06 Javascript

js控制鼠标事件移动及移出效果显示

Oct 19 Javascript

JavaScript实现页面5秒后自动跳转的方法

Apr 16 Javascript

基于Javascript倒计时效果

Dec 22 Javascript

AngularJS 前台分页实现的示例代码

Jun 07 Javascript

快速解决处理后台返回json数据格式的问题

Aug 07 Javascript

自己动手封装一个React Native多级联动

Sep 19 Javascript

JavaScript语句错误throw、try及catch实例解析

Aug 18 Javascript

Node.js path模块,获取文件后缀名操作

Nov 07 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/04/28 PHP

php在window iis的莫名问题的测试方法

2013/05/14 PHP

PHP把网页保存为word文件的三种方法

2014/04/01 PHP

JSON字符串传到后台PHP处理问题的解决方法

2016/06/05 PHP

PHP bin2hex()函数基础实例讲解

2019/02/11 PHP

javascript简单事件处理和with用法介绍

2013/09/16 Javascript

ext中store.load跟store.reload的区别示例介绍

2014/06/17 Javascript

javascript学习笔记（四）function函数部分

2014/09/30 Javascript

极力推荐10个短小实用的JavaScript代码段

2016/08/03 Javascript

Javascript中常用的检测方法小结

2016/10/08 Javascript

对比分析Django的Q查询及AngularJS的Datatables分页插件

2017/02/07 Javascript

JavaScript之Date_动力节点Java学院整理

2017/06/28 Javascript

限时抢购-倒计时的完整实例(分享)

2017/09/17 Javascript

js实现GIF动图分解成多帧图片上传

2019/10/24 Javascript

24个ES6方法解决JS实际开发问题(小结)

2020/05/31 Javascript

Python中index()和seek()的用法(详解)

2017/04/27 Python

python的Tqdm模块的使用

2018/01/10 Python

python贪婪匹配以及多行匹配的实例讲解

2018/04/19 Python

用Python PIL实现几个简单的图片特效

2019/01/18 Python

详解Python并发编程之创建多线程的几种方法

2019/08/23 Python

使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例

2020/03/16 Python

Python json转字典字符方法实例解析

2020/04/13 Python

Python使用windows设置定时执行脚本

2020/11/12 Python

python实现启动一个外部程序,并且不阻塞当前进程

2020/12/05 Python

实例讲解使用HTML5 Canvas绘制阴影效果的方法

2016/03/25 HTML / CSS

维多利亚的秘密官方网站：Victoria’s Secret

2018/10/24 全球购物

《猫》教学反思

2014/02/26 职场文书

研究生考核个人自我鉴定

2014/03/27 职场文书

志愿者活动总结

2014/04/28 职场文书

部门经理迟到检讨书

2015/02/16 职场文书

异地恋情人节寄语

2015/02/28 职场文书

研究生论文答辩开场白

2015/05/27 职场文书

Python实现批量自动整理文件

2022/03/16 Python

Java中API的使用方法详情

2022/04/06 Java/Android

win10以太网连接不上怎么办?Win10连接以太网详细教程

2022/04/08 数码科技

Redis实现短信验证码登录的示例代码

2022/06/14 Redis