一个图片放大缩小的js,希望能帮忙修改错误

Question

window.onload = function () {

var clist= document.getElementById('courselist');

var cimg = clist.getElementsByTagName('img');

var cwidth = 280;

var cheight = 160;

var marginLeft = 0;

    var marginTop = 0;

    var startTimer = null;

    var outTimer = null;

for(var i=0;i<cimg.length;i++){

cimg[i].index=i;

   cimg[i].onmouseover = function(){

    clearInterval(outTimer);

    startTimer=setInterval(function  (){

cwidth = cwidth + 2;

cheight = cheight + 1;

marginLeft = marginLeft - 1;

marginTop = marginTop - 0.5;

 

cimg[this.index].style.width = cwidth+'px';

cimg[this.index].style.height = cheight+'px';

cimg[this.index].style.marginLeft = marginLeft+'px';

cimg[this.index].style.marginTop = marginTop+'px'; 

if (cwidth>380) {

clearInterval(startTimer);

};

},20);

}

cimg[i].onmouseout = function  () {

clearInterval(startTimer);

outTimer = setInterval(function  () {

cwidth= cwidth - 2;

cheight = cheight - 1;

marginLeft = marginLeft + 1;

marginTop = marginTop + 0.5;

cimg[this.index].style.width = cwidth+'px';

cimg[this.index].style.height = cheight+'px';

cimg[this.index].style.marginLeft = marginLeft+'px';

cimg[this.index].style.marginTop = marginTop+'px';

if (cwidth<=280) {

clearInterval(outTimer);

};

},20);

}

}

}

Answer 1

补充html：<div  id="courselist"> <h2 class="coursetitle">课程</h2> <ul> <li> <div class="coursepic"><img src="images/course1.jpg" alt="" /></div> <div> <p class="st1">PHP第三方登录-OAuth2.0协议</p> <p class="st2">更新1-2</p> </div> </li> <li> <div class="coursepic"><img src="images/course2.jpg" alt="" /></div> <div> <p class="st1">PHP第三方登录-OAuth2.0协议</p> <p class="st2">更新1-2</p> </div> </li> <li> <div class="coursepic"><img src="images/course3.jpg" alt="" /></div> <div> <p class="st1">PHP第三方登录-OAuth2.0协议</p> <p class="st2">更新1-2</p> </div> </li> <li> <div class="coursepic"><img src="images/course4.jpg" alt="" /></div> <div> <p class="st1">PHP第三方登录-OAuth2.0协议</p> <p class="st2">更新1-2</p> </div> </li> <li> <div class="coursepic"><img src="images/course1.jpg" alt="" /></div> <div> <p class="st1">PHP第三方登录-OAuth2.0协议</p> <p class="st2">更新1-2</p> </div> </li> <li> <div class="coursepic"><img src="images/course2.jpg" alt="" /></div> <div> <p class="st1">PHP第三方登录-OAuth2.0协议</p> <p class="st2">更新1-2</p> </div> </li> </ul> <div class="clearfix"></div> <div><div class="coursebtn"><a href="#">全部课程</a></div></div> </div>css:.coursepic{ width: 280px; height: 160px; overflow: hidden;}.st1{text-align: center;font-size: 14px;}.st2{text-indent: 10px;margin-top: 20px;}