|
在本教程中，我们将教你如何在不使用FLASH，而仅仅是使用CSS3 和jQuery技术，就让你的输入框具有虹灯闪烁的效果。  实现方法： 第1步：1、编码前的准备工作 确定您下载的jQuery是最新版本（在撰写本文时版本1.4.2）， <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script> 以上是jQuery新版本,读者也可以自行下载最新的版本 第2步：创建窗体布局的XHTML 以下将创建名为index.html的XHTML布局。 <!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" class="no-js"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Form Tutorial</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="highlight.js"></script> </head> <body> <div id="page-wrap"> <form id="myform" method="post" action="#"> <div> <div class="field"> <label for="personname" >Name</label> <input class="inputfield textfield" name="personname" type="text" /> </div> <div class="field"> <label for="email" >E-mail</label> <input class="inputfield textfield" name="email" type="text" /> </div> <div class="field"> <label for="website" >Website</label> <input class="inputfield textfield" name="website" type="text" /> </div> <div class="field area"> <label for="details" >Details</label> <textarea class="inputfield textarea1" name="details" ></textarea> </div> </div> <!--div class="clear"></div--> <input class="submitbutton" type="submit" value="Submit" /> </form> </div> </body> </html> 第3步：创建基本的CSS样式 下面将创建XHTML页面的CSS样式，样式的代码保存在style.css里，代码如下： *{ margin:0; padding:0; } textarea, input{ outline:none; } body{ background:#3D3D3D; } #page-wrap{ width:350px; min-height:500px; height:auto; margin:0 auto; position:relative; padding-top:50px; font:15px Arial; } #myform{ width:375px; -moz-border-radius: 8px; /* FF1+ */ -webkit-border-radius: 8px; /* Saf3+, Chrome */ border-radius: 8px; /* Opera 10.5, IE 9 */ margin:0 auto; position:relative; } #myform label{ top:10px; position:relative; color:white; } .field{ background:gray; padding:15px 15px 0 10px; height:50px; width:350px; } #myform div:first-child{ -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; } #myform div:last-child{ -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .area{ padding:15px 15px 0 10px; min-height:195px; } .inputfield{ padding:0 10px 0 10px; float:right; width:200px; font:15px Arial; border:2px aqua inset; -moz-border-radius: 8px; /* FF1+ */ -webkit-border-radius: 8px; /* Saf3+, Chrome */ border-radius: 8px; /* Opera 10.5, IE 9 */ } .textfield{ height:25px; padding-top:5px; } .textarea1{ padding-top:10px; padding-bottom:10px; height:150px; max-height:200px; max-width:250px; } 在这里，因为受到输入框阴影属性的影响，所以如何设置CSS3边界属性变得非常重要。对于文本区域轮廓属性设置为0，并输入字段，用来删除浏览器默认的焦点属性， 接下来设置提交按钮的样式属性，使按钮和表格的风格一致。把下面的代码加到CSS样式里。 .submitbutton{ border: 0px; float:right; width:75px; height:40px; font:20px Arial; position:relative; top:20px; right:10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0px 0px 30px #3cdfdf; -webkit-box-shadow: 0px 0px 30px #3cdfdf; box-shadow: 0px 0px 30px #3cdfdf; background-image: -moz-linear-gradient(top, white, #3cdfdf); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#3cdfdf'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#3cdfdf')"; /* IE8 */ } .submitbutton:hover{ background: #3cdfdf; color:white; } 以上的CSS代码我们给提交按钮的背景图片设置了线性渐变效果，我们只是改变了整个背景色为＃3cdfdf（旱厕蓝色）和文本颜色为白色。 提交按钮就有点霓虹灯的效果。 第4步：使用css3设置页面动画效果 添加下面的代码到CSS文件里，设置页面动画效果。 @-webkit-keyframes pulsate { 0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset } 25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset } 50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset } 75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset } 100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset } } .inputfield:focus{ -webkit-animation-name: pulsate; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-box-shadow: 0px 0px 30px #3cdfdf; box-shadow: 0px 0px 30px #3cdfdf; } 第5步：添加jQuery 添加以下的代码到highlight.js.里。 $(document).ready(function(){ var globalParent=null; var mouse_is_inside=false; /*The snippet below is activated when an inputfield is focused*/ $('.inputfield').focus(function(){ globalParent=$(this).parent('div'); globalParent.click(); }); /*This following part will be activated when the inputfield loses focus*/ $('.inputfield').blur(function(){ globalParent.click(); }); /*Following part will be activated when the user clicks anywhere inside the container div of the inputfield*/ $('.field').click(function(){ if(!($(this).is('.dummy'))){ $('.dummy').css('background-color','gray'); $('.dummy label').css('color','white'); $('.dummy').removeClass('dummy'); $(this).css('background-color','black'); $(this).children('label').css('color','#3cdfdf'); $(this).addClass('dummy'); } }); /*The following code checks time and again whether the mouse is inside the form or not*/ $('form').hover(function(){ mouse_is_inside=true; }, function(){ mouse_is_inside=false; } ); /*If user clicks anywhere outside the form, all highlighting is removed*/ $('body').click(function(){ if(!mouse_is_inside) { $('.field').css('background-color','gray'); $('.field label').css('color','white'); $('.dummy').removeClass('dummy'); } }); }); 这是一个简单的jQuery代码，其中，重点设置了输入文本框的DIV设置，并改变其背景为黑色。
|
