（1）javascript里的Math函数在页面特效中的应用

首先，做一个跟随鼠标移动的页面特效。

先上代码，就这样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动事件</title>
    <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            .box{    position:relative;
                    width:930px;
                    height:200px;
                    margin:0 auto;
                    margin-top:50px;
                    background:    #9400D3;
                    
            }
            li{
                    list-style: none;
                    float:left;
                    height:200px;
                    width:300px;
                    margin:0;
                    margin-left:10px;
            }
            li div{
                    height:200px;
                    width:300px;
                    margin:0;
                    

            }
            #thisM{    position:absolute;
                    z-index:-1;
                    height:260px;
                    width:150px;
                    left:85px;
                    
                    background:#4B0082;
                    top:-30px;
            }    

            #thisN{    position:absolute;
                    z-index:-3;
                    height:260px;
                    width:150px;
                    left:85px;
                    
                    background:black;
                    top:-30px;
            }
    </style>
</head>
<body>

<div class="box">
    <ul>
        <li class="childBox">
            <div></div>
        </li>
        <li class="childBox">
            <div></div>
        </li>
        <li class="childBox">
            <div></div>
        </li>
    </ul>
    <div id="thisM"></div>
    <div id="thisN"></div>
</div>

<script  type='text/javascript'>
            var bgCard=document.getElementById('thisM');
            var Nav=document.getElementsByTagName('ul');
            var btn=Nav[0].getElementsByTagName('div');
            var colorArr=['red','green','pink'];
                //赋予颜色
                for(var i=0;i<btn.length;i++)
                {
                        btn[i].style.backgroundColor=colorArr[i];
                        
                };
                    
                    
            //为每个btn绑定鼠标事件
            function move(obj){

                this.timer=setInterval(function(){
                
                    //参考点，从每个元素的中线出发考虑，得出结果之后，再拿中线的位置减去bgCard的一半宽度。
                    var met=bgCard.offsetLeft+0.5*bgCard.offsetWidth;
                    var a=0.5*btn[obj].offsetWidth+btn[obj].offsetLeft;
                    var speed=(a-met)/10;
                    met+=speed;
                    //下面，记住了，speed为正数，即目标位置数值比移动的数值大，移动的数值加上speed（>0），则用Math.ceil():向上取整。
                    //否则，speed为负数，即目标位置数值比移动的数值小，移动的数值加上speed（<0)，则用Math.floor():向下取整.
                    //总而言之，就是使speed的绝对值往大的方向变化就是了。
                    var b=speed>0?Math.ceil(met-0.5*bgCard.offsetWidth):Math.floor(met-0.5*bgCard.offsetWidth);
                 bgCard.style.left=b+'px';
                     console.log(bgCard.offsetLeft+0.5*bgCard.offsetWidth);
                     console.log(0.5*btn[obj].offsetWidth+btn[obj].offsetLeft);
                      if((bgCard.offsetLeft+0.5*bgCard.offsetWidth) == (0.5*btn[obj].offsetWidth+btn[obj].offsetLeft))
                     {
                         clearInterval(this.timer);
                             };},30);
                        };
                                 
                            
            for(var i=0;i<btn.length;i++)
                {        btn[i].index=i;
                        btn[i].onmouseover=function(){
                            clearInterval(window.timer);
                            move(this.index);
                                 console.log(bgCard.offsetLeft+0.5*bgCard.offsetWidth);
                            };  
                    
                        btn[i].onmouseout=function(){
                        clearInterval(window.timer);
                            move(0);
                    };   
                };
</script>
    
</body>


</html>

　　　　都是我自己摸索出来的，其中有几个重要的点要注意：

　　　　　　(1)关于setInterval与clearInterval

　　　　　　　　　　　　　　setInterval要放在功能函数中，不能放在事件触发的函数中。

　　　　　　　　　　　　　　而clearIntrval要放在事件触发的函数里（感觉也可以不用放,因为还会有另一个clearInterval放在setInterval里的if语句中。不过最好还是放吧。），用来

　　　　　　　　　　　　　　结构是

　　　　　　　　　　　　　　　　　　　　//功能函数

　　　　　　　　　　　　　　　　function  Func(){

　　　　　　　　　　　　　　　　　　　　//全局变量timer，属于window对象

　　　　　　　　　　　　　　　　　　this.timer=setInterval(function(){

　　　　　　　　　　　　　　　　　　　　　...dosomething...

　　　　　　　　　　　　　　　　　　　　if(目标结果达到){

　　　　　　　　　　　　　　　　　　　　　　//清除定时器

　　　　　　　　　　　　　　　　　　　　clearInterval(window.timer);}　　　　　　　},时间)

　　　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　//条件触发函数（例如，click，mouseover等等）

　　　　　　　　　　　　　　　　　　obj.onclick=function(){

　　　　　　　　　　　　　　　　　　　　　　clearInterval(window.timer);

　　　　　　　　　　　　　　　　　　　　　　Func();　　　　　　　　}　　

 

　　　　　　　　　　　　

　　　　　　　(2)关于Math函数

　　　　　　　　　　　　　　　　Math.ceil()与Math.floor()

　　　　　　　　　　　　　　　　　　Math.ceil():向上取整。

　　　　　　　　　　　　　　　　　　Math.floor():向下取整。

　　　　　　　　　　　

 　　　　　　　　　　　　　　　　　　　　var speed=(a-met)/10;

 

   　　　　　　　　　　　　　　　　　　  met+=speed;
                    //下面，记住了，speed为正数，即目标位置数值比移动的数值大，移动的数值加上speed（>0），则用Math.ceil():向上取整。
                    //否则，speed为负数，即目标位置数值比移动的数值小，移动的数值加上speed（<0)，则用Math.floor():向下取整.
                    //总而言之，就是使speed的绝对值往大的方向变化就是了。
                    var b=speed>0?Math.ceil(met-0.5*bgCard.offsetWidth):Math.floor(met-0.5*bgCard.offsetWidth);
posted @ 2017-04-07 14:37  我爱米稀饭  阅读(179)  评论(0)    收藏  举报