首页 > 代码库 > 关于DOM的简单动画
关于DOM的简单动画
利用DOM制作的一些简单动画
1、div每点击一次 向右移动200px(带DOM动画过渡)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
font-size: 20px;
}
#testDiv {
width: 150px;
height: 150px;
background: #abcdef;
position: relative;
margin-left: 50px;
}
#duiZhao {
width: 150px;
height: 150px;
background: greenyellow;
position: relative;
margin-left: 50px;
left: 200px;
}
</style>
</head>
<body>
<h1>10.div每点击一次 向右移动200px(带DOM动画过渡)</h1>
<div id="testDiv">点击我会移动</div>
<div id="duiZhao">我是移动后200px位置的参照</div>
<script>
var testDiv = document.getElementById(‘testDiv‘);
testDiv.addEventListener(‘click‘, divMove );
function divMove() {
var frameCount = 50;
var n = 200/frameCount ; //1s50帧
var count = 0;
var setIntervalId = setInterval(divSmallMove,1000/frameCount); //1s50帧
divSmallMove();
function divSmallMove() {
testDiv.style.left = parseInt(getStyle(testDiv, ‘left‘))+ n + ‘px‘;
count ++;
if(count == frameCount) { //移动了50帧，说明位置到了，停下来
clearInterval(setIntervalId);
}
}
}
function getStyle(obj, attr) {
if (obj.currentStyle) {//IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, "伪类")[attr];//Firefox
}
}
</script>
</body>
</html>
2、利用DOM实现hover效果
//鼠标移入函数 function mouseEnterFunc() { this.style.backgroundColor = ‘#abcdef‘; } //鼠标移出函数 function mouseLeaveFunc() { this.style.backgroundColor = ‘#fff‘; } var trArr = myTabel.getElementById(‘tr‘); tr.addEventListener(‘mouseenter‘,mouseEnterFunc); tr.addEventListener(‘mouseleave‘,mouseLeaveFunc);
关于DOM的简单动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。