js之图片变大变小效果
浏览数：18 /
时间：2015年06月09日
1、当鼠标移到图片上，图片变大；当鼠标移出图片，图片变小，效果如图：
2、原理不难，就是鼠标over时，设置一个定时器，让图片逐渐变大，鼠标out时同理，看下最初的简略代码你就会明白：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
border: 1px solid red; /* 边框 */
margin: 100px auto; /* 外边距 */
overflow: hidden; /* 溢出隐藏 */
}
img {
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
cursor: pointer; /* 鼠标变手 */
}
</style>
</head>
<body>
<div>
<img src="1.jpg" id="img" />
</div>
</body>
<script type="text/javascript">
// js代码
</script>
</html>
js代码：
window.onload = function(){
var img = document.getElementById(‘img‘); // 获取img标签
var width = img.width; // 初始化img宽度
var height = img.height; // 初始化img高度
var marginLeft = 0; // 初始化img左外边距
var marginTop = 0; // 初始化img上外边距
var overTimer = null; // 初始化定时器，用于鼠标接触时
var outTimer = null; // 初始化定时器，用于鼠标离开时
img.onmouseover = function(){ // 鼠标接触img
clearInterval(outTimer); // 清除鼠标离开的定时器
overTimer = setInterval(function(){ // 设置鼠标接触触发的定时器，时距15毫秒
width = width + 2; // 宽度+2
height = height + 1; // 高度+1
marginLeft = marginLeft - 1; // 左外边距-1
marginTop = marginTop - 0.5; // 上外边距-0.5
img.style.width = width + ‘px‘; // 设置img宽度
img.style.height = height + ‘px‘; // 设置img高度
img.style.marginLeft = marginLeft + ‘px‘; // 设置img左外边距
img.style.marginTop = marginTop + ‘px‘; // 设置img上外边距
if (width >= 270) { // 如果img宽度大于某值
clearInterval(overTimer); // 清除定时器
};
}, 15);
};
img.onmouseout = function(){ // 鼠标离开img
clearInterval(overTimer); // 清除鼠标接触的定时器
outTimer = setInterval(function(){ // 设置鼠标离开触发的定时器，时距15毫秒
width = width - 2; // 宽度-2
height = height - 1; // 高度-1
marginLeft = marginLeft + 1; // 左外边距+1
marginTop = marginTop + 0.5; // 上外边距+0.5
img.style.width = width + ‘px‘; // 设置img宽度
img.style.height = height + ‘px‘; // 设置img高度
img.style.marginLeft = marginLeft + ‘px‘; // 设置img左外边距
img.style.marginTop = marginTop + ‘px‘; // 设置img上外边距
if (width <= 200) { // 如果img宽度小于某值
clearInterval(outTimer); // 清除定时器
};
}, 15);
};
};
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
