故宫博物院项目 JS功能整理
1. 图片自动旋转
原理:通过页面加载完成事件,用定时器来控制图片每次旋转的角度
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//转圈 window.onload=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了的值小于多少的时候,是数字不断叠加,当满足条件时,停止定时器。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
window.onscroll=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); } }
4.事件流
多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流”。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>