js之图片变大变小效果

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);
    };
};



js之图片变大变小效果,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。