zoukankan      html  css  js  c++  java
  • 仿苹果导航菜单js问题

    通过鼠标与不同图片的间距比对图片做相应的放大缩小。




    
    
    <div id="box">
        <img src="images/1.png" class="img1" alt=""/>
        <img src="images/2.png" class="img1" alt=""/>
        <img src="images/3.png" class="img1" alt=""/>
        <img src="images/4.png" class="img1" alt=""/>
        <img src="images/5.png" class="img1" alt=""/>
    </div>


    #box{ position:
    fixed; bottom: 0; 100%; text-align: center;
    //zoom: 1; ------------>这个属性在这里不能用 }
     document.onmousemove=function (ev)
    {
            var oEvent=ev||event;
            var oDiv=document.getElementById('box');
            var aImg=document.getElementsByTagName('img');         
            var i=0;
            var disNum = 400;//间距阀值
            
            for(i=0;i<aImg.length;i++)
            {
                var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2;  //取得img的x点
                var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2; // img->Y
                
                var a=x-oEvent.clientX; //鼠标的间距离图片x间距
                var b=y-oEvent.clientY; //鼠标离离图片Y间距
                
                var dis=Math.sqrt(a*a+b*b); //三角形就长边算两点间距
                
                var scale=1-dis/disNum; //反数 大的小 小的变大
                
                if(scale<0.5)
                {
                    scale=0.5;
                }
                
                aImg[i].style.width=scale*120+'px';
                
                 
            }
        };
        }
  • 相关阅读:
    关于安卓9patch图片的探究
    android中系统时间
    android中的对话框
    swing界面刷新问题
    android中的xml解析全解
    android中listView下拉刷新
    次小生成树(poj 1679)
    poj 2312(bfs+priority_queue)
    poj 2060(最小路径覆盖)
    poj 1734 (最小环)
  • 原文地址:https://www.cnblogs.com/jinbiao/p/3691525.html
Copyright © 2011-2022 走看看