CSS选择器权重
2016-09-21 19:11
471 查看
做轮播动画时，不要在CSS中设置left，top，否则元素不会动
<head>
<style type="text/css">
#img1{
width:600px;
height:300px;
position:absolute;
background-color:#FF3333;
/* left:300px; */
/* top:300px; */
/*不要在CSS中设置left，top，否则元素不会动; */
}
</style>
</head>
<body>
<input type="button" value="move img1" id="bton1" />
<p id="img1">testelement</p>
<script type="text/javascript">
init();
btonclick();
//用JS动态设定 left和top
function init(){
var img1=document.getElementById("img1");
img1.style.left="300px";
img1.style.top="300px";
}
function btonclick(){
var bton1=document.getElementById("bton1");
bton1.onclick=function(){
moveelembyid("img1",600,600,10);
};
}
function moveelembyid(elemid,finalx,finaly,interval){
var obj=document.getElementById(elemid);
var x=parseInt(obj.style.left);
var y=parseInt(obj.style.top);
if(x==finalx&&y==finaly) return true;
if(x<finalx) x++;
if(x>finalx) x--;
if(y<finaly) y++;
if(y>finaly) y--;
obj.style.left=x+"px";
obj.style.top=y+"px";
var str="moveelembyid('"+elemid+"',"+finalx+","+finaly+","+interval+")";
setTimeout(str,interval);
}
</script>
</body>
</html>
<head>
<style type="text/css">
#img1{
width:600px;
height:300px;
position:absolute;
background-color:#FF3333;
/* left:300px; */
/* top:300px; */
/*不要在CSS中设置left，top，否则元素不会动; */
}
</style>
</head>
<body>
<input type="button" value="move img1" id="bton1" />
<p id="img1">testelement</p>
<script type="text/javascript">
init();
btonclick();
//用JS动态设定 left和top
function init(){
var img1=document.getElementById("img1");
img1.style.left="300px";
img1.style.top="300px";
}
function btonclick(){
var bton1=document.getElementById("bton1");
bton1.onclick=function(){
moveelembyid("img1",600,600,10);
};
}
function moveelembyid(elemid,finalx,finaly,interval){
var obj=document.getElementById(elemid);
var x=parseInt(obj.style.left);
var y=parseInt(obj.style.top);
if(x==finalx&&y==finaly) return true;
if(x<finalx) x++;
if(x>finalx) x--;
if(y<finaly) y++;
if(y>finaly) y--;
obj.style.left=x+"px";
obj.style.top=y+"px";
var str="moveelembyid('"+elemid+"',"+finalx+","+finaly+","+interval+")";
setTimeout(str,interval);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 