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

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

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

以下是程序代码

<!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精仿百度搜索框特效代码

相关资料更多>

推荐阅读更多>