JS+CSS实现仿新浪微博搜索框的方法
本文实例讲述了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实现类似于新浪微博搜索框弹出效果的方法，包括了javascript实现类似于新浪微博搜索框弹出效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现类似于新浪微博搜索框弹出效果的方法。分享给大家供大家参考。具体实现方法如下： 运行效果如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍jquery实现仿新浪微博评论滚动效果，包括了jquery实现仿新浪微博评论滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现仿新浪微博评论滚动效果。分享给大家供大家参考。具体如下： 这里使用jquery实现评论滚动效果，仿新浪微博大厅文字滚动效果，以前有不少人膜拜的效果，现在被模仿的到处都是啦，呵呵，今天这个仍是模仿的，评论和头像一起向下滚动，最新的一
-
本文向大家介绍js实现类似新浪微博首页内容渐显效果的方法，包括了js实现类似新浪微博首页内容渐显效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现类似新浪微博首页内容渐显效果的方法。分享给大家供大家参考。具体分析如下： 要点一： 从在前面插入新内容，如果没有新内容，就是在后面插入新内容。 要点二： 取得li的高度，然后再li的高度设置为0,因为高度的变化是从0到现有高度。
-
本文向大家介绍jQuery实现鼠标选文字发新浪微博的方法，包括了jQuery实现鼠标选文字发新浪微博的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现鼠标选文字发新浪微博的方法。分享给大家供大家参考，具体如下： 最近注意到新浪博客有个小功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到新浪微博，一时兴起昨晚就写了一个Demo玩了一下，代码超
-
1. 申请应用 1.注册微博开放平台账号 https://open.weibo.com/apps。如果已有则忽略该步骤，直接进入第二步。 2.创建应用 通过顶部菜单栏的【微连接-网站接入】或者直接点击【网站接入 (opens new window)】进入网站接入界面 点击【立即接入】按钮进入创建应用页面，填入应用名称，应用分类选择默认的“网页应用”即可 创建完成后会自动跳转到应用信息页面，如下图，
-
使用oauth2.0协议，封装了新浪微博的常用请求，登录，获取个人信息，获取微博，获取粉丝，关注，微博分类以及地理位置等请求。使用方便。请求使用的是MKNetworkkit第三方库。代码使用block来写的。