首页 > 代码库 > 新买了ipad，在ipad上面看见的一个效果，pc上应该也见过，但是还是ipad上面有印象，如果是弹性运动就最好了

新买了ipad，在ipad上面看见的一个效果，pc上应该也见过，但是还是ipad上面有印象，如果是弹性运动就最好了

2024-07-06 10:57:54   219人阅读

新买了ipad，在ipad上面看见的一个效果，pc上应该也见过，但是还是ipad上面有印象，如果是弹性运动就最好了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
.in{ width:200px; height:24px; background:#cfcfd1; margin:10px; border:1px solid #999; font-size:13px; padding:2px 10px;}
</style>
<script type="text/javascript">
window.onload=function(){
var aIn=getByClass("in");
for(var i=0;i<aIn.length;i++){
aIn[i].onfocus=function(){
    this.style.background="#fff";
    move(this,"width",parseInt(css(this,"width"))+50);
    }
aIn[i].onblur=function(){
    this.style.background="#cfcfd1";
    move(this,"width",parseInt(css(this,"width"))-50);
    }
}

}
</script>
<link href=http://www.mamicode.com/"css/reset.css" rel="stylesheet" type="text/css">
<link href=http://www.mamicode.com/"css/resouce.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="text" class="in" />
<input type="text" class="in" />
<input type="text" class="in" />
</body>
</html>
<script type="text/javascript">
function getByClass(oClass,id){
        var re=[];
        var id=id||document;
        if(document.getElementsByClassName){
            re=id.getElementsByClassName(oClass);
        }else{
        
    var aChild=id.getElementsByTagName("*");
    var reg=new RegExp("\\b" + oClass + "\\b");
    for(var i=0;i<aChild.length;i++){
        if(aChild[i].nodeType=="1"){
            var aClassCllect=aChild[i].className;
            if(reg.test(aClassCllect)){
                    re.push(aChild[i]);
                };
        }        
    }    
    }
        return re;
    }
    
    
function move(obj,attr,target){
    clearInterval(obj.timer)
    obj.timer=setInterval(function(){
        if(attr=="opacity"){
            var cur=Math.round(parseFloat(css(obj,attr))*100);            
        }else{
            var cur=parseInt(css(obj,attr));
        }
        
        if(cur<target){
            var speed=Math.ceil((target-cur)/7);
        }else{
            var speed=Math.floor((target-cur)/7);
        }        
        if(attr=="opacity"){
            obj.style.filter=‘alpha(opacity=‘+cur+speed+‘)‘;
            obj.style.opacity=(cur+speed)/100;
        }else{
            obj.style[attr]=cur+speed+"px";
        }
        
        if(cur==target){
            clearInterval(obj.timer)
            
        }                       
    },30)
}
function css(obj,attr){
    return (obj.currentStyle||getComputedStyle(obj,null))[attr];
}
</script>

 


联系
我们