JQUERY精仿百度搜索框特效代码

本站整理佚名 2014-01-11 点击： 1 我要评论

精仿百度搜索框，获得焦点才可以改变文本区域，失去焦点则不可改变文本区域。所以只要在获得焦点后监视是否有输入值则可，一旦失去焦点则移除监视。

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
 #newsletter{display: block; position: absolute; opacity: 0.4; filter: Alpha(opacity=40); top: 20px; left: 20px; z-index: 3;}
 #newsletter_t{display: block; position: absolute; font-style: italic; top: 20px; left: 20px; z-index: 2;}
</style>
</head>

<body>
<input type="text" value="" title="使用 百度 搜索" id="newsletter">
<input type="text" value="百度 <Ctrl+k>" id="newsletter_t">
<script type="text/javascript">
 jQuery(document).ready(function(){
  var timer = null;
  $('#newsletter').focus(function(){
   SetTime();
  });
  $('#newsletter').blur(function(){
   clearTimeout(timer);
  });
  function SetTime(){
   var str = $('#newsletter').val();
   if(str != ''){
    $('#newsletter').animate({'opacity':'1'},0);
   }
   else{
    $('#newsletter').animate({'opacity':'0.4'},0);
   }
   timer = setTimeout(function(){SetTime();},1);
  }
 });
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

更多关于 JQUERY 百度搜索框的文章

·上一篇：用鼠标绘制圆形图案，可叠加产生不同色彩
·下一篇：在特定范围内循环上下左右平移的图层特效

相关排行总榜

广告代码

菜单特效

日期特效

QQ在线客服浮动代码下载
非常漂亮的菜单切换格子图片特效
超酷3D照片展示效果
JQUERY制作的全屏个性相册展示特效...
宽幅的JS幻灯片放映特效代码
可通过鼠标移动变换局部图片的js相...
JQUERY制作的全屏背景投影效果的图...
超漂亮导航菜单
仿MAC苹果系统跟随滚动条飘浮网页下...
使用jQuery制作自定义动画横幅广告...
仿凡客网站在不同位置多次调用的顶...
纯CSS菜单导航特效代码
超酷的动感导航菜单
jquery制作的延迟下拉列表二级tab切...
导航菜单特效
js特效：手风琴选项卡内容展示特效...
来自IBM中文官方网站的导航条渐隐特...
非常酷的一个导航菜单
可上下左右切换的jquery动态导航插...
利用JQUERY编写的动态伸缩导航菜单...
团购倒计时特效代码带天数日期及分...
js按指定格式显示日期时间样式特效...
一款简单的日历选择器特效
网页日历代码
漂亮实用的日历
HTML5标准，一个Canvas时钟特效演示...
js获取系统时间
js获取时间
日期选择器
蓝色风格日历

JQUERY精仿百度搜索框特效代码

分类热门文章