解决网页列表中动态显示用户上传图片的美观问题-优快云博客

今天做列表的时候感觉把用户上传的图片直接放在列表中，对页面的美观实在是一个挑战。

首先，图片的形状不确定，有的是正方形，有的是长方形，长方形还有横长，纵长的区别

如果一定要对客户上传的图片进行限制，那么客户可能还失去上传的兴趣。。虽然可以截取，但是如果自动截取，那截取哪部分最好呢？

左思右想，左右为难啊。。

如果在列表中只摆放我想摆放的图片，鼠标滑过的时候显示客户的图片岂不美哉？

于是乎，我便动手翻阅资料。鞥，信息发达果然是再好不过。

学习别人的资料，删除不必要的，增加我需要的，结果还真让我弄出个属于我自己的鼠标滑过显示图片的东西。

发上来存起来，以后随时可以拿来使用。

jQuery.fn.imgTitle = function(){
	$(this).live({
		mouseover:function(e){
			var c=$(this).attr("title") ? "<br/>" + $(this).attr("title") : "";
			$("body").append("<p id=\"TV\"><img src=\""+ $(this).attr("href") +"\" style=\"max-width:400px;\" />"+c+"</p>");
			$("#TV").css("top",e.pageY+"px").css("left",e.pageX+10+"px").fadeIn("fast");
		},
		mouseout:function(){
			$("#TV").remove();
		},
		mousemove:function(e){
			$("#TV").css("top",e.pageY+"px").css("left",e.pageX+10+"px");
		}
	});
};

* 使用方法：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery实现鼠标滑过显示大图</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jQuery.AntUI.imgTitle.js"></script>
<script type="text/javascript">
$(function(){
	$(".tView").imgTitle();
});
</script>
<style type="text/css">
#TV{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;}
</style>
</meta>
</head>
<body>
 <h1>Images Title</h1>
 <ul id="imgTitle">
  <li><a href="./img/img1.jpg" class="tView"><img src="./img/picture.png" /></a></li>
  <li><a href="./img/img2.jpg" class="tView"><img src="./img/picture.png"/></a></li>
  <li><a href="./img/img3.jpg" class="tView" title="测试用的"><img src="./img/picture.png" /></a></li>
  <li><a href="./img/img4.jpg" class="tView" title="瞧瞧正常不"><img src="./img/picture.png" /></a></li>
 </ul>
</body>
</html>