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

js 图片放大缩小(有过渡效果)

2008-10-08 10:54 656 查看

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<img src="D:/1.jpg" name="img" width="100" height="100" style="margin: 300px 300px 300px 300px;" id="img" onmouseover="changeLarge();" onmouseout="changesmall();" />

<script>

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

var s = null;

var l = null;

var step = 8; //调整改变尺寸的速度

var step_ = step * 2;

var maxWidth = 200; //最大宽度

var maxHeight = 200; //最大高度

var minWidth = 100; //最小宽度

var minHeight = 100; //最小高度

function changeLarge(){

clearInterval(s);

l = setInterval("larger()",1);

}

function changesmall(){

clearInterval(l);

s = setInterval("smaller()",1);

}

function smaller(){

if(parseInt(img.width)>minWidth){

img.style.marginLeft = parseInt(img.style.marginLeft)+step;

img.width = parseInt(img.width) - step_;

}else{

clearInterval(s);

}

if(parseInt(img.height)>minHeight){

img.style.marginTop = parseInt(img.style.marginTop)+step;

img.height = parseInt(img.height) - step_;

}else{

clearInterval(s);

}

}

function larger(){

if(parseInt(img.width) <maxWidth){

img.style.marginLeft = parseInt(img.style.marginLeft)-step;

img.width = parseInt(img.width) + step_;

}else{

clearInterval(l);

}

if(parseInt(img.height) <maxHeight){

img.style.marginTop = parseInt(img.style.marginTop)-step;

img.height = parseInt(img.height) + step_;

}else{

clearInterval(l);

}

}

</script>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航