js 宽窄屏切换效果优化感悟

优化后代码：

<script type="text/javascript">

var oCr = document.getElementById("contentRight");

var oWide = document.getElementById("wide");

var oNarrow = document.getElementById("narrow");

var timer1;

var timer2;

var p = oCr.offsetWidth;

function closeCR() {

if (p > 0) {

p -= 5;

oCr.style.width = p + "px"

} else {

clearInterval(timer1);

}

}

function openCR() {

if (p > 195) {

clearInterval(timer2);

} else {

p += 5;

oCr.style.width = p + "px"

}

}

oWide.onclick = function () {

if (p > 0) {

clearInterval(timer2);

}

timer1 = setInterval("closeCR()", 10);

oNarrow.style.display = "block";

}

oNarrow.onclick = function () {

clearInterval(timer1);

timer2 = setInterval("openCR()", 10);

oNarrow.style.display = "none";

}

</script>

<script type="text/javascript">

//宽窄屏切换

var oCr = document.getElementById("contentRight");

var oWide = document.getElementById("wide");

var oNarrow = document.getElementById("narrow");

var timer1;

var p = oCr.offsetWidth, viewWidth = p;

function changeCR( ratio) {

p = p + ratio*4;

oCr.style.width = p + "px";

if(p > viewWidth || p<0) {

clearInterval(timer1);

}

}

oWide.onclick = function () {

timer1 = setInterval("changeCR(-1)", 10);

oNarrow.style.display = "block";

};

oNarrow.onclick = function () {

timer1 = setInterval("changeCR(1)", 10);

oNarrow.style.display = "none";

}

</script>