同样是项目中的一个小控件,类似微博中的文件上传按钮的美化,之前传过一个版本,这次是完善版的
腾讯微博: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);
图片一张: