要点一
//查询某个对象的某个属性值
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
要点二
//在此操作想要获取对象的属性
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].timer = null;
}
divs[0].onmouseover = function(){
startMove(this,'width',500);
}
divs[1].onmouseover = function(){
startMove(this,'height',300)
}
divs[2].onmouseover = function(){
startMove(this,'borderWidth',100); //设置边框宽度
}
<html>
<head><meta charset="utf-8">
<style type="text/css">
body,div,span{margin:0;padding: 0}
div{
width: 100px;
height: 100px;
background: red;
margin-bottom: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div>hello</div>
<div></div>
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].timer = null;
}
divs[0].onmouseover = function(){
startMove(this,'width',500);
}
divs[1].onmouseover = function(){
startMove(this,'height',300)
}
divs[2].onmouseover = function(){
startMove(this,'borderWidth',100); //设置边框宽度
}
//查询某个对象的某个属性值
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,mudidi){
clearInterval(obj.timer);
//就应该给每一个div设置定时器
obj.timer = setInterval(function(){
//parseInt() 函数可解析一个字符串，并返回一个整数。
if(parseInt(getStyle(obj,attr))>mudidi){
var speed = (mudidi-parseInt(getStyle(obj,attr)))/10; //-40
speed = Math.floor(speed);
}else{
var speed = (mudidi-parseInt(getStyle(obj,attr)))/10; //40
speed = Math.ceil(speed);
}
if(parseInt(getStyle(obj,attr))==mudidi){
clearInterval(obj.timer);
}else{
obj.style[attr] = parseInt(getStyle(obj,attr)) + speed +'px';
}
document.title = parseInt(getStyle(obj,attr))+'speed'+speed;
}, 100)
}
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
