您的位置：首页 > Web前端 > JavaScript

《js实现图片缓慢缩放的效果》之学习总结

2014-10-17 10:29 337 查看

学习资源来自慕课网：http://www.imooc.com/learn/80

题述：点击放大，即将图片放大，点击缩小，及缩小图片。此例常应用在如淘宝、京东网站上的图片缩放。

小结：

实现缩放图片的关键点：

1）图片需要用<img>来引用（通过我本人自己的测试，发现图片的宽高不能通过css或内联style来另外设置，不然缩放不起作用。）

2）实现缩放效果采用setInterVal()缓慢缩放

3）宽高要同比例缩放

例如：以同比例5%的速度增大

img.width = img.width*1.05;

img.height = img.height*1.05;

4）图片缩放的限制：

**每次点击时规定缩放的比例

**图片总体缩放到一定程度后，限制不能缩放

5）注意释放定时器clearInterval();

代码练习如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width:300px;
margin:0 auto;
height:auto;
}
</style>
<script type="text/javascript">
/***
实现缩放图片的关键点：
1）图片需要用<img>来引用
通过我本人自己的测试，发现图片的宽高不能通过css或内联style来另外设置，不然缩放不起作用。
2）实现缩放效果采用setInterVal()缓慢缩放
3）宽高要同比例缩放
例如：以同比例5%的速度增大
img.width = img.width*1.05;
img.height = img.height*1.05;
4）图片缩放的限制：
**每次点击时规定缩放的比例
**图片总体缩放到一定程度后，限制不能缩放
5）注意释放定时器clearInterval();
***/
window.onload = function(){
var big = document.getElementById("big");
var small = document.getElementById("small");
big.onclick = function(){
makeBig();
};
small.onclick = function(){
makeSmall();
};

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

//图片最大限度增加到原来的3倍
var maxW = img.width*3;
var maxH = img.height*3;

//图片最大限度缩小到原来的0.5倍
var minW = img.width*0.5;
var minH = img.height*0.5;

//图片放大
function makeBig(){

//每次点击后的宽高限于同比例增加50%;
var clickW = img.width*1.5;
var clickH = img.height*1.5;

var timer = setInterval(function(){

if(img.width < clickW){//限定宽高增大的程度到每次点击后的宽高的150%

if(img.width < maxW){//限定物体能缩放的极限值为maxW

//以同比例5%的速度增大
img.width = img.width*1.05;
img.height = img.height*1.05;
}else{
alert("亲，图片已放到最大了");
clearInterval(timer);
}
}else{
clearInterval(timer);
}

},10);
}

//缩小图片
function makeSmall(){
//每次点击后的宽高限于同比例增加50%;
var clickW = img.width*0.5;
var clickH = img.height*0.5;

var timer = setInterval(function(){

if(img.width > clickW){//限定宽高缩放的程度到每次点击后的宽高的50%

if(img.width > minW){//限定物体能缩放的极限值为minW

//以同比例5%的速度减小
img.width = img.width*0.95;
img.height = img.height*0.95;
}else{
alert("亲，图片已缩到最小了");
clearInterval(timer);
}
}else{
clearInterval(timer);
}

},10);
}
}
</script>
</head>
<body>
<div class="box">
<img src="default.jpeg" id="imgdemo"></img>
<p>
<input type="button" id="big" value="放大" />
<input type="button" id="small" value="缩小" />
</p>
</div>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航