前端-jQuery开发：案例（详细）_jquery前端实例

作者：爱喝兽奶帝天荒 | 2024-07-12 07:52:49

踩

jquery前端实例

1.图片的放大和缩小功能

2.自动更新-当地时间

3.反选

4.商品图片局部放大（放大镜）效果

1.图片的放大和缩小功能


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片的放大和缩小功能</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#img{
				margin: auto;
				display: block;
			}
		</style>
	</head>
	<body>
		<img id="img" src="../images/745659.jpg" />
		<script src="../js/jQuery-3.6.0.min.js"></script>
		<script type="text/javascript">
			window.onload=function(){//
				var img = document.getElementById("img");
				let width = img.width;//let表示允许
				let height = img.height;
				let bl = width/height;//获得一个放大比
				let c_width = 0;
				let c_height = 0;
				let isBig = true;
				setInterval(function(){//setInterval是实现定时调用函数
					if (isBig) {
						c_width+=bl*2;
						c_height+=2;
					} else{
						c_width-=bl*2;
						c_height-=2;
					}
					
					//给前面提供是否需要放大或缩小的参数
					if(c_width>width&&c_height>height){
						isBig=false;//图片缩小
					}
					if(c_width<100){
						isBig=true;//图片放大
					}
					
					img.style.width = c_width+"px";
					img.style.height = c_height+"px";
					//console.log(c_width+"---"+c_height);
				})
			}
		</script>
	</body>
</html>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】