jquery控制图片列表

最新推荐文章于 2022-11-25 12:30:05 发布

cdcdhj

最新推荐文章于 2022-11-25 12:30:05 发布

阅读量97

点赞数

分类专栏： jquery 文章标签： jquery css3

本文链接：https://blog.csdn.net/cdcdhj/article/details/121275435

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<script>
		$(function(){
			$("#iamgecss").find("img").each(function(){
				var imgwidth=80,
				imgheight=60;
				percent=0;
				image=new Image();
				image.src=this.src;
				
				if(image.width>0&&image.height>0){
					percent=(imgwidth/image.width<imgheight/image.height)?imgwidth/image.width:imgheight/image.height;
				}
				
				if(percent<=1){
					this.style.width=(image.width * percent)+"px";
					this.style.height=(image.height * percent)+"px";
				}else{
					this.style.width=(image.width)+"px";
					this.style.height=(image.height)+"px";
				}
				
			});
		});
		</script>
		<style type="text/css">
			#iamgecss{
				float: left;
				width: 300px;	
				list-style: none;
				border: 1px solid pink;
			}
			
			#iamgecss li{
				float: left;
				width: 90px;
				margin: 5px;
				text-align: center;
				
			}
			#iamgecss li .area{
				height: 60px;
				width: 80px;
				display: block;
			}
		</style>
	</head>
	<body>
		<center>
		<div >
			<ul id="iamgecss">
				<li ><span class="area"><img src="img/1.jpeg"/></span></li>
				<li ><span class="area"><img src="img/2.jpeg"/></span></li>
				<li ><span class="area"><img src="img/3.jpeg"/></span></li>
				<li ><span class="area"><img src="img/4.jpeg"/></span></li>
				<li ><span class="area"><img src="img/11j.png"/></span></li>
				<li ><span class="area"><img src="img/pdf.png"/></span></li>
			</ul>
		</div>
		</center>
	</body>
</html>

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery控制图片列表

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script> $(function(){ $("#iamgecss").fin
复制链接

扫一扫

专栏目录