类似微博的文件上传按钮file的美化

来源：互联网发布：移动硬盘怎么恢复数据编辑：程序博客网时间：2024/05/18 02:37

同样是项目中的一个小控件，类似微博中的文件上传按钮的美化，之前传过一个版本，这次是完善版的

腾讯微博：http://t.qq.com/guyue1106/profile?pgv_ref=im.minicard.title&ptlang=2052，

新浪weibo：http://weibo.com/1714234642/profile?leftnav=1&wvr=3.6&mod=personinfo

欢迎互加!

调用方法的有三个参数，所以更加灵活一些，可以自定义美化后的图片的样式，还有图片上的文字;

同样免费下载的地址：http://download.csdn.net/detail/guyuehu452/4334410

代码也贴出来，希望能多多交流。

调用方法：obj.file("_obj","_objHover","txt") ;

_obj表示美化后的按钮class名;_objHover表示鼠标放上去后的class名,txt为按钮上面的文字

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=utf-8" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.file.js"></script><script type="text/javascript">$(function(){ /**  *用法：obj.file("_obj","_objHover","txt")  *_obj表示美化后的按钮class名;_objHover表示鼠标放上去后的class名,txt为按钮上面的文字  *都不填表示用默认的样式.file_intv和.file_intv_hover  *多个不同的input[file]只需定义不同的class和样式即可  */$(".file_real").file();})</script><title>input[type=file]上传按钮 美化</title><style type="text/css">.file_intv{ background:url(images/file.gif) no-repeat; width:97px; height:23px; cursor:pointer; display:inline-block; text-align:center; font-size:12px; line-height:23px;}.file_intv_hover{ background:url(images/file.gif) -107px 0 no-repeat; width:97px; height:23px;  cursor:pointer; display:inline-block;}</style></head><body><div>    <input type="file" name="upload" size="2" class="file_real"/></div></body></html>

js:

/** *input[type=file]美化; *email:hale1106@163.com */(function($){$.fn.file = function(_obj,_objHover,txt){$(this).each(function(i,item){$(item).wrap($("<div></div>"));var $fileDiv = $(item).parent("div:first");$fileDiv.css({position:"absolute","z-index":"1",cursor:"pointer",width:"30px",overflow:"hidden","display":"none",height:"28px",filter:"alpha(opacity=0)",opacity:"0"});$(item).css({"margin-left":"-18px",cursor:"pointer","width":"40px"}).attr('size','1');var obj = _obj || "file_intv";var objHover = _objHover || "file_intv_hover";var text =(!txt)?" ":txt;var $label =$("<label>"+text+"</label>");var _name = $(item).attr("name")==""?"upload":$(this).attr("name");$label.insertBefore($fileDiv).attr("class",obj).attr("for",_name);$label.mousemove(function(e){$(this).addClass(objHover);var _left = e.pageX - $fileDiv.width()*0.6;var _top = e.pageY - $fileDiv.height()*0.6;$fileDiv.css({display:"block",left:_left,top:_top});});$fileDiv.mouseout(function(e){$label.removeClass().addClass(obj);$fileDiv.css({display:"none"});});})}  })(jQuery);

图片一张：