<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.lis {
height: 60px;
width: 260px;
background-color: antiquewhite;
border-radius: 60px;
margin-top: 10px;
line-height: 60px;
text-align: center;
border: 5px solid cadetblue;
opacity: 0.5;
box-shadow: 5px 2px 10px darkred;
}
</style>
<script type="text/javascript">
function getclsname(clsname, parent) {
var oparent = parent ? document.getElementById(parent) : document,
eles = [],
elements = oparent.getElementsByTagName("*");
for (var i = 0, l = elements.length; i < l; i++) {
if (elements[i].className == clsname) {
eles.push(elements[i]);
}
}
return eles;
}
/* function getstyle(obj,sty){
if(obj.currentStyle){
return obj.currentStyle[sty];
}else{
return getComputedStyle(obj,null)[sty];
}
}*/
window.onload = function() {
var lis = getclsname("lis", "oul"),
btn=document.getElementById("bt"),
txt=document.getElementById("text"),
speed = 10,
sty = null;
btn.onclick=function(){
sty=txt.value;
document.title=sty;
}
for (var i = 0, l = lis.length; i < l; i++) {
this.timer=null;
lis[i].onmouseover = function() {
lis_over(this, speed, 0, 500,1,sty);
}
lis[i].onmouseleave = function() {
lis_over(this, speed, 1, 260,0.5,sty);
}
}
}
function lis_over(obj, speed, lg, itg,op,sty) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var wd=window.getComputedStyle(obj,null)[sty];
if(sty=='opacity'){
wd=Math.round(parseFloat(wd)*100);
}else{
wd=parseInt(wd);
}
if (wd == itg||wd/100==op) {
clearInterval(obj.timer);
} else {
if(lg!=0){
speed=-10;
}
if(sty=='opacity'){
var a = wd + speed;
if(a<0||a==0){
obj.style[sty] = op;
clearInterval(obj.timer);
}else{
obj.style[sty] = a/100;
}
}else{
if(wd>itg&&lg!=0){
obj.style[sty]=itg+"px";
clearInterval(obj.timer);
}else if(wd<itg&&lg==0){
obj.style[sty]=itg+"px";
clearInterval(obj.timer);
}
if(wd>800/2){
if(lg==0){speed=sp+10;}
else{speed=-sp-10;}
}
obj.style[sty] = wd + speed + "px";
}
}
}, 100)
}
</script>
</head>
<body>
<div>
<input type="text" id="text" style="color:grey" value="opacity" onfocus="this.value=''"/>
<input type="button" id="bt" value="确定" />
</div>
<ul id=oul>
<li class="lis">imooc</li>
<li class="lis"></li>
<li class="lis"></li>
<li class="lis"></li>
<li class="lis"></li>
<li class="lis"></li>
</ul>
</body>
</html>输入“width"，点击确定，width值只会增长一次，然后就被clearinterval了，明明是&&，怎么还是直接执行了？非常感谢！
width的第一次 onmouseover触发参数为 wd=260，itg=500，lg=0，满足 else if(wd<itg&&lg==0) 这个条件，自然就被你clear掉了
//定义quot;取消设置quot;的函数我也有问题，$.support显示的是W3C模型；$.support.boxModel显示的是IE模型，坑
致谢！
把
else if(wd<itg&&lg==0){
obj.style[sty]=itg+"px";
clearInterval(obj.timer);
}
中的clearInterval(obj.timer);删掉就行了