為什么定義了圖片的大小后實現不了圖片的縮放
因為我用的圖片太大了，然后用css樣式定義了圖片的長寬，之后放大功能一直不能實現，我就奇怪，后來發現是定義了圖片長寬的問題，這是為什么定義了就不能實現js放大?。?/p>
chendidi
2016-07-07
2 回答
舉報
0/150
提交
取消
2016-07-22
<!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 我用到了自己寫的庫，這樣看起來更賤的順暢放大和縮小
2016-07-11
把圖片用百分比寫就好了，圖片實際大小就那么大，怎么會變，用百分比自動適應屏幕。