新买了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 #; font-size:13px; padding:2px 10px;}
</style>
<script type="text/javascript">
window.onload=function(){
var aIn=getByClass("in");
for(var i=;i<aIn.length;i++){
aIn[i].onfocus=function(){
this.style.background="#fff";
move(this,"width",parseInt(css(this,"width"))+);
}
aIn[i].onblur=function(){
this.style.background="#cfcfd1";
move(this,"width",parseInt(css(this,"width"))-);
}
} }
</script>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="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=;i<aChild.length;i++){
if(aChild[i].nodeType==""){
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))*);
}else{
var cur=parseInt(css(obj,attr));
} if(cur<target){
var speed=Math.ceil((target-cur)/);
}else{
var speed=Math.floor((target-cur)/);
}
if(attr=="opacity"){
obj.style.filter='alpha(opacity='+cur+speed+')';
obj.style.opacity=(cur+speed)/;
}else{
obj.style[attr]=cur+speed+"px";
} if(cur==target){
clearInterval(obj.timer) }
},)
}
function css(obj,attr){
return (obj.currentStyle||getComputedStyle(obj,null))[attr];
}
</script>