故宫博物院项目 JS功能整理

　　1. 图片自动旋转

　　　　　　　　原理：通过页面加载完成事件，用定时器来控制图片每次旋转的角度

//转圈
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了的值小于多少的时候，是数字不断叠加，当满足条件时，停止定时器。

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.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);
     }        
}

监听事件改变DIV位置

　　4.事件流　　　　　　　

　　　　多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <div style="background: #ccc;  100px;height: 100px;" onMouseOver="show()">
        
        
    </div>
    <div id="qq" style=" 100px;height: 100px; background: red;" onMouseOut="dis()">
            <div style=" 50px;height: 50px;background: green;"></div>
            <div style=" 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>

事件流