1. 图片自动旋转
原理：通过页面加载完成事件，用定时器来控制图片每次旋转的角度
//转圈
window.οnlοad=
function(){
var dsq=setInterval("sa()",100
);
var dsq=0
;
var n=0
;
};
function sa(){
n++
;
var deg1=n*2
;
var sa1=document.getElementById("zq1"
);
sa1.style.transform=("rotate("+deg1+"deg)"
);
}
图片自动旋转
2.数字叠加
原理：可以通过监听事件或者页面加载完成事件来实现，当滚动条的值大于多少的时候，执行定时器，用定时器来控制判断，判断条件为HTML了的值小于多少的时候，是数字不断叠加，当满足条件时，停止定时器。
var a6=0
;
var ppp=0
;
window.onscroll=
function(){
var pp =
window.scrollY;
// 数字叠加
// 找到元素并赋值
var a1=document.getElementById("gw"
);
// 要改变的值
var a5=100
;
// 添加定时器并赋值
var a7=setInterval(
function(){
// 判断
if(pp>1000 && ppp===0
){
// 当满足上面判断条件时，再次判断
if(a6>=1862690
){
// 当满足上面条件时赋值PPP为9，结束监听事件，并结束定时器
ppp=9
;
clearInterval(a7);
}
// a6的值为本身加上a5的数
a6 +=
a5;
// a1里面的内容为a6的值
a1.innerHTML=a6;
//a6++;
}
},1
);
};
数字叠加
3.图片移动
原理：通过DOM操作，来改变边距的值，在用定时器来控制移动的速度。
var xha2=xh2.style.marginTop.slice(0,-2);
获取marginTop的值，slice(0,-2) 是指获取除最后两位的值，比如，10px, 就会获取到10
window.οnscrοll=
function (){
var pp =
window.scrollY;
if(pp>1400
){
var xh1=document.getElementById("csa1"
);
var xha1=xh1.style.marginTop.slice(0,-2
);
var xhb1= setInterval(
function(){
if(xha1<=85
){
xh1.style.marginTop=xha1+1+"px"
;
xha1++
;
}else{
clearInterval(xhb1);
}
},1
);
}
}
监听事件改变DIV位置
4.事件流
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="background: #ccc; width: 100px;height: 100px;" onMouseOver="show()">
</div>
<div id="qq" style="width: 100px;height: 100px; background: red;" onMouseOut="dis()">
<div style="width: 50px;height: 50px;background: green;"></div>
<div style="width: 50px;height: 50px;background: green;"></div>
</div>
</body>
<ml>
<script>
function isMouseLeaveOrEnter(e, handler) {
var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?
e.toElement:e.fromElement;
while (reltg && reltg !=
handler){
reltg =
reltg.parentNode;
}
return (reltg !=
handler);
}
var box=document.getElementById("qq"
);
box.onmouseout=
function(ev){
var ev=ev||
window.event;
if(!
isMouseLeaveOrEnter(ev,box)){
return false;
}
box.style.display = 'none'
;
}
</script>
事件流
转载于:https://www.cnblogs.com/cp123/p/8857722.html
相关资源：北京故宫博物院ppt模板
