jquery图片等比缩放的原理写法。

作者: jiukeshuju 分类: JAVASCRIPT,JQUERY 发布时间: 2021-08-12 00:37
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			ul li {
				list-style: none;
				float: left;
				padding-left: 30px;
				padding-bottom: 30px;
			}
		</style>
		
		<ul class="ull">
			<li><img src="1.jpg" ></li>
			<li><img src="1.jpg" ></li>
			<li><img src="1.jpg" ></li>
			<li><img src="1.jpg" ></li>
			<li><img src="1.jpg" ></li>
			<li><img src="1.jpg" ></li>
		</ul>
		
		<script>
			$(function(){
				
				$(".ull").find("img").each(function(){
					var imagew = 80;
					var imageh = 60;
					var imag = new Image();
					var sfbl = 0;
					imag.src=this.src;
					
					// 判断图片是否存在
					if(imag.width > 0 && imag.height >0){
						sfbl = (imagew/imag.width < imageh / imag.height ) ? imagew/imag.width : imageh / imag.height;
						if(sfbl <= 1){
							this.style.width = imag.width*sfbl;
							this.style.height = imag.height*sfbl;
						}else{
							this.style.width = imag.width;
							this.style.height = imag.height;
						}
					}
				})
				
				
			})
		</script>
		
		
	</body>
</html>




如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论