为什么定义了图片的大小后实现不了图片的缩放
因为我用的图片太大了，然后用css样式定义了图片的长宽，之后放大功能一直不能实现，我就奇怪，后来发现是定义了图片长宽的问题，这是为什么定义了就不能实现js放大啊？
chendidi
2016-07-07
2 回答
<!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" />
<script src="move.js"></script>
<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");
var minBtn = document.getElementById("min");
var img = document.getElementById("myImage");
var maxWidth = img.width*2;//放大宽度的极限值
var maxHeight = img.height*2;//放大的高度极限值
var minWidth = img.width*.5;
var minHeight = img.height*.5;
maxBtn.onclick = function(){//添加放大点击事件
maxFun();//放大函数
}
minBtn.onclick = function(){
minFun();
}
function maxFun(){
if(img.width<=maxWidth){
startMove(img,'width',Math.ceil(img.width*1.05))
startMove(img,'height',Math.ceil(img.height*1.05))
}
else{
alert("zuida");
}
}
};
function minFun(){
if(img.width>=minWidth){
startMove(img,'width',Math.ceil(img.width*.9))
startMove(img,'height',Math.ceil(img.height*.9))
}else{
alert("1");
}
};
</script>
</body>
</html>
我的代码和老师不一样没有用到setInterval 我用到了自己写的库，这样看起来更贱的顺畅放大和缩小
举报
0/150
提交
取消
