js手写输入在线搜索特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js手写输入在线搜索特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!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" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>js手写输入在线搜索</title>
<link rel="stylesheet"href="css/css.css" type="text/css" />
</head>
<body>
<br /><br />
<div id="center">

<div id="logo"></div>
<div id="search_main">
<div id="pull_down"></div>
<form id="dictF" action="#" method="get">
<ul class="input_box">
<span class="bg_left"></span>
<button onMouseOut="this.className='search'" onMouseOver="this.className='search search_hover'" type="submit" class="search" onClick="clickCountIndex(10);"></button>
<input class="search_input" name="s" id="s" type="text" maxlength="64" autocomplete="off" onFocus="this.select();" onBlur="$(this).removeClass('input_style_focus');$(this).removeClass('input_style_hover');" onMouseOver="this.focus()" value="www.abc.com"/>
<div onClick="showFlash('flash/blue_paint.swf');clickCountIndex(9);" class="handwrite" id="showButton" title="打开/关闭手写输入"></div>
</ul>
</form>
</div>
</div>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript">

var showButton = document.getElementById('showButton');
if (is_ie) {
showButton.attachEvent("onclick", preventDivClose);
document.attachEvent("onclick", divClose);
} else  {
showButton.addEventListener("click", preventDivClose, false);
document.addEventListener("click",divClose, false);
}
if (window.addEventListener||window.attachEvent)
{
ICB.init();ICIBA.Suggest.Install('s', true, 'dictF', 'pull_down');$('#s').focus();
if(document.getElementById("indexads")){
document.getElementById("indexads").src = document.getElementById("indexads").getAttribute("ssrc");
}else{
var flash_foot = document.getElementById("flash_foot").getAttribute("ssrc");
var hid = document.getElementById("flash_id").getAttribute("hid");
document.getElementById("bottom_ad").innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="960px" height="60px"><param name="movie" value="'+flash_foot+'"><param name="quality" value="high"><param name="wmode" value="opaque" /><embed src="'+flash_foot+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="960" height="60" wmode="opaque"></embed></object><a onclick="clickCountIndex(31)" style="position:absolute;width:960px;height:60px;left:0px;top:0px;cursor:pointer;z-index:10;background-color:#fff;filter:alpha(opacity=0);opacity:0;" target="_blank" href="'+hid+'" /></div>';
}
}
</script>
</body>
</html>

JS代码(event.js):

/**本作品由JquerySchool网站整理改编**关注：http://www.jq-school.com*/
$(function(){
	$("a").focus(function(){
	this.blur();
}
);
	$("#showButton").mouseover(function(){
	$(this).removeClass("handwrite").addClass("handwrite_over")}
).mouseout(function(){
	$(this).removeClass("handwrite_over").addClass("handwrite")}
);
}
);
	function showFlash(a){
	var b = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="295" height="200"><param name="movie" value="' + a + '"> <param name="quality" value="high"><param name="flashvars" value="serverIP=58.68.226.8"/><embed flashvars="serverIP=58.68.226.8" src="' + a + '" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="295" height="200" /></object>';
	open_lw(b)}
function open_lw(c){
	var g = "showflash";
	var a = document.getElementById("showButton");
	var b = getCoords(a);
	if (!document.getElementById(g)){
	var f = document.createElement("div");
	var e = b.y + 26;
	var d = b.x;
	f.style.left = d + "px";
	f.style.top = e + "px";
	f.style.margin = "0px";
	f.style.padding = "0px";
	f.style.position = "absolute";
	f.style.zIndex = "9999";
	f.id = g;
	f.innerHTML = c;
	f.style.background = "#fff";
	document.body.appendChild(f)}
else{
	iciba_shouxie_close()}
}
function getCoords(c){
	var a = c.offsetLeft - 30;
	var d = c.offsetTop;
	var b = c.offsetParent;
	while (b != null){
	a += b.offsetLeft;
	d += b.offsetTop;
	b = b.offsetParent}
return{
	x:a,y:d}
}
function iciba_shouxie_close(){
	var a = "showflash";
	if (document.getElementById(a)){
	document.body.removeChild(document.getElementById(a))}
}
function registerHotKey(f){
	var b = f ? f:(window.event ? window.event:null);
	var c = b.srcElement || b.target;
	if (c.nodeName != "INPUT" && c.nodeName != "OBJECT"){
	var d = (is_ie) ? b.which:b.keyCode;
	if (d >= 65 && d <= 90 && b.shiftKey == false && b.altKey == false && b.ctrlKey == false){
	var a = 1;
	window.scrollTo(0,0);
	if ($("#s").val()){
	$("#s").select()}
else{
	$("#s").focus()}
}
else{
	var a = 0}
}
}
function SinoVoice_show(a){
	document.getElementById("s").value += a}
function getFlashObject(a){
	if (window.document[a]){
	return window.document[a]}
if (navigator.appName.indexOf("Microsoft Internet") == -1){
	if (document.embeds && document.embeds[a]){
	return document.embeds[a]}
}
else{
	return document.getElementById(a)}
}

CSS代码(css.css):

*{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}
body{font-size:12px;color:#999;background-color:#fff}
ul{list-style-type:none}
a{color:#346699;text-decoration:none}
a:hover{text-decoration:underline}
.font_black,#spdc .font_black{color:#333}
.fl{float:left}
.fr{float:right}
img{border:0}
a{color:#153769}
#spdc{color:#666;min-width:960px;height:30px;background:url(../images/vbg_new.gif) repeat-x 0 0;line-height:30px;padding:0 16px;overflow:hidden}
#spdc a{color:#666;text-decoration:none}
#showinfo{margin-left:20px}
#showinfo span{padding:0}
.input_style{width:638px;font-weight:bold;padding:2px 45px 0 5px;height:27px;font-size:18px;line-height:27px;margin:0;color:#333}
.handwrite,.handwrite_over,.handwrite_close,.handwrite_close_over{width:16px;height:16px;cursor:pointer;position:absolute;top:7px;right:114px}
#search_main .handwrite,#search_main .handwrite_over,#search_main .handwrite_close,#search_main .handwrite_close_over{right:124px}
.handwrite{background:url(../images/vbg_new.gif) no-repeat -20px -35px;z-index:9999}
.handwrite_over,.handwrite_close,.handwrite_close_over{background:url(../images/vbg_new.gif) no-repeat -20px -55px}
.search{width:116px;height:36px;background:url(../images/vbg_new.gif) no-repeat -90px -35px;border:0;cursor:pointer;float:right;*margin-top:1px;_margin-top:0}
.search_hover{background-position:-90px -75px}
.more_info_2{background-position:0 -330px;margin:17px 0 0 32px}
#phrase_ol{margin-left:30px}
.search_bt{background-position:-221px -510px;width:101px;height:31px;float:left}
.search_bt_hover{background-position:-221px -542px}
.sc_web{background-position:-332px -510px;width:91px;height:31px;float:left;margin-left:8px}
.sc_web_hover{background-position:-332px -542px}
.search_bar_left{width:5px;height:41px;background-position:-373px -390px}
#center{width:590px;margin:0 auto 20px}
#logo{text-align:center;padding:70px 0 25px;*padding-top:82px;position:relative}
#logo img{margin-right:28px}
#search_main ul.nav{height:35px;line-height:31px;font-size:14px;color:#236fd4}
#search_main ul.nav li{padding:0 18px 0 7px;float:left}
#search_main ul.nav li a{color:#333}
#search_main ul.nav li a:hover{color:#236fd4;text-decoration:underline}
.input_box{width:593px;position:relative;height:36px;background:url(../images/vbg_new2.gif) repeat-x bottom left}
.bg_left{width:1px;height:34px;display:block;position:absolute;background:url(../images/vbg_new.gif) no-repeat 0 -35px;left:1px;*top:1px}
.input_style,.search_input{background:#fff url(../images/vbg_new.gif) repeat-x 0 -198px;border-top:#c0c0c0 1px solid;border-left:#c0c0c0 1px solid;border-right:#d9d9d9 1px solid;border-bottom:#d9d9d9 1px solid}
.search_input{border-width:1px;border-style:solid;border-color:#9a9a9a #b2b2b8 #9a9a9a #9a9a9a;width:417px;_float:left;font-size:16px;height:29px;line-height:29px;padding:2px 53px 2px 5px}
input_style_hover,.search_input_hover,.input_style:hover{border:#c0c0c0 1px solid}
input_style_focus,.search_input_focus,.search_input:focus,.input_style:focus{border:#236fd4 1px solid}
#search_main ul.nav li.no_bg{background:0}
#search_main ul.nav li.no_bg a{color:red}
.search_button .search{width:109px;height:29px;background-position:0 -574px}
.search_button .search_hover{background-position:-110px -574px}
.search_button .search_web{width:89px;height:29px;background-position:-220px -574px;margin-left:16px;float:left}
.search_button .search_web_hover{background-position:-310px -574px;margin-left:16px;float:left;width:89px}
#search_main{position:relative;z-index:3000}
#pull_down{position:absolute;font-size:14px;top:69px;width:475px;border:#c6c6c6 1px solid;background-color:#fff;line-height:170%;color:#333;z-index:1000;visibility:hidden}
#pull_down .text_blue{color:#0766dc;font-weight:bold}
.text_right{float:right;color:#999}
#pull_down li{padding:0 5px}
#pull_down li.bg_blue{background-color:#539aef;color:#fff}
#pull_down li.bg_blue .text_right{color:#fff}
#pull_down li.bg_blue .text_blue{color:#fff}
#pull_down p{background-color:#f0f0f0;height:22px;line-height:22px;text-align:right;padding-right:5px}
.pull_button{height:31px;padding:4px 0 9px 142px}
.pull_button .search{margin-left:16px}
.pull_button .search_web,.pull_button .search_web_hover{float:left}

附件:下载该文件资源,减少时间成本(增值服务)