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

用Javascript实现图片的缓慢缩放效果

2015-09-12 22:34 966 查看

<body>
<!--页面布局:一张图片两个按钮-->
<div style = "width:400px;margin:0 auto">    <!--设置div,目的使图片居中-->
<img src = "./wolf.jpg" id="image"/><br/>
<input type = "button" id = "max" value = "放大"/>
<input type = "button" id = "min" value = "缩小"/>
</div>
<script>
//获取元素,添加点击事件
window.onload = function() {
var img = document.getElementById("image");
var maxBtn = document.getElementById("max");
var minBtn = document.getElementById("min");

var maxWidth = img.width * 2;//定义放大的极限宽度值
var minWidth = img.width * 0.5;//定义缩小的极限宽度值

maxBtn.onclick = function () {//添加放大的点击事件
maxFun();//调用放大函数
};

minBtn.onclick = function(){//添加缩小的点击事件
console.log("click minbutton");
minFun();//调用缩小函数
};
//定义放大函数
function maxFun() {
var endWidth = img.width * 1.3;//定义每次点击后放大的宽度
var endHeight = img.height * 1.3;//定义每次点击后放大的高度

var maxTimer = setInterval(function () {//设置定时器
if (img.width < endWidth) {//判断点击结束后的图片宽度是否小于每次点击的最大宽度
if (img.width < maxWidth) {//判断点击结束后的图片宽度是否小于放大的极限宽度
img.width = img.width * 1.05;//每次点击的宽度放大幅度
img.height = img.height * 1.05;//每次点击的高度放大幅度
} else {
alert("已经放大到最大值");
clearInterval(maxTimer);
}
} else {
clearInterval(maxTimer);
}
}, 10);
}
//定义缩小函数
function minFun(){
var endWidth = img.width * 0.7;//定义每次点击后缩小的宽度
var endHeight = img.height * 0.7;//定义每次点击后缩小的高度
var minTimer = setInterval(function(){
if(img.width > endWidth){//判断点击结束后的图片宽度是否大于每次点击的最小宽度
if(img.width > minWidth){//判断点击结束后的图片宽度是否大于缩小的极限宽度
img.width = img.width * 0.95;//每次点击的宽度缩小幅度
img.height = img.height * 0.95;//每次点击的高度缩小幅度
console.log("img.height = img.height * 0.95;");
}else{
alert("已经缩小到最小值");
clearInterval(minTimer);
console.log("clear Interval");
}
}else{
clearInterval(minTimer);
}
},10);
}
}

</script>
</body>

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

标签：

相关文章推荐

新的分享

章节导航