目录
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>