为了账号安全,请及时绑定邮箱和手机立即绑定

代码求找错啊。。。慕课这编辑器不会报哪里错了,写错了就傻眼了。还不知道哪里错了,重写了好几次了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<div style="width:400px;margin:0 auto">

    <img src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg" id="myImage"  /><br />

    <input type="button" id="max" value="放大"  />

    <input type="button" id="min" value="缩小"  />

</div>

<script>

    window.onload = function(){

var maxBtn = document.getElementById("max");

maxBtn.onclick = function(){//添加放大点击事件

maxFun();//放大函数

}

var img = document.getElementById("myImage");

var maxWidth = img.width*2;//放大宽度的极限值

var maxHeight = img.height*2;//放大的高度极限值

//定义放大函数

function maxFun(){

 var endWidth =img.width*1.3;

          var endHeight =img.height*1.3;

    var maxTimer = setInterval(function(){

//判断图片宽度或者高度,数值不能超过1.5倍

if(img.width<maxWidth){

        if(img.width<endWidth){

            img.width = img.width*1.05;                

       img.height = img.height*1.05;         

            }else{

alert("已经放大到最大值了");

//终止定时器

clearInterval(maxTimer);

}

}else{

clearInterval(maxTimer);

}

},10);

}

</script>

</body>

</html>


正在回答

2 回答

你这个只需要控制图片的高度或宽度其中一个就行了。不需要两个都控制

0 回复 有任何疑惑可以回复我~

我去。。。最后少了一个 }

maxWidth和endWidth写反了。。。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
用JavaScript实现图片缓慢缩放效果
  • 参与学习       32790    人
  • 解答问题       91    个

本课程讲解如何使用JavaScript技术实现图片缩放效果,并分析原理

进入课程

代码求找错啊。。。慕课这编辑器不会报哪里错了,写错了就傻眼了。还不知道哪里错了,重写了好几次了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信