这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现类似于新浪微博搜索框弹出效果的方法, 涉及 javascript 弹出搜索框的相关实现技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0417/270277.html