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

最新推荐文章于 2024-04-30 22:06:17 发布

hale

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量815

点赞数

分类专栏：前端开发文章标签： file function class input xhtml upload

本文链接：https://blog.csdn.net/guyuehu452/article/details/7609040

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

腾讯微博：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);

图片一张：

hale

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似微博的文件上传按钮file的美化

同样是项目中的一个小控件，类似微博中的文件上传按钮的美化，之前传过一个版本，这次是完善版的腾讯微博：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=personin
复制链接

扫一扫