JQUERY精仿百度搜索框特效代码-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20253 次

以下是程序代码

<!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 全部选择提示：你可先修改部分代码，再按运行]