课程 \
用JavaScript实现图片缓慢缩放效果
5-1 编程挑战
<!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>
<!--页面布局-->
<!--图片相关属性设置-->
<img style="position:absolute;left:0;top:0" src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg" id="myImage" />
<!--滑动按钮设置-->
</div>
<script>
window.onload = function(){
var img = document.getElementById("myImage");
var btn = document.getElementById("btn");
//绑定点击事件
btn.onclick = function(){
imgSlide(); //点击按钮时执行滑动函数
}
var maxLeft = 700;//向右滑动的极限值
//实现滑动函数
function imgSlide(){
//每次点击后向右滑动300px
var slideTimer = setInterval(function(){
//现在距离左边的距离
if(imgLeft < endLeft){
if(imgLeft < maxLeft){
//将图片的左偏移（left值）增加20px，注意单位
}else{
//终止定时器函数
}
}else{
clearInterval(slideTimer);
}
},10);
}
}
</script>
</body>
</html>
2019-04-21
查看完整代码
3-6 编程练习
<!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;//放大的高度极限值
var minWidth = img.width*0.5;//缩小宽度的极限值
var minHeight = img.height*0.5;//缩小高度的极限值
//定义放大函数
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);
}
var minBtn = document.getElementById("min");
minBtn.onclick = function(){
minFun();
}
//实现缩小函数
function minFun(){
}
}
</script>
</body>
</html>
2019-04-21
查看完整代码
3-3 编程练习
<!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 maxTimer = setInterval(function(){
//判断图片宽度或者高度，数值不能超过1.5倍
}else{
alert("已经放大到最大值了");
//终止定时器
clearInterval(maxTimer);
}
}else{
clearInterval(maxTimer);
}
},10);
}
</script>
</body>
</html>
2019-04-21
查看完整代码
2-3 编程练习
<!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;？">
<img src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg" id="myImage" />
<input type="button" id="max" value="放大" />
<input type="button" id="min" value="缩小" />
</div>
</body>
</html>
2019-04-21
查看完整代码