一个图片放大缩小的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;}