JAVASCRIPT模仿苹果菜单

最新推荐文章于 2021-06-25 17:12:26 发布

anfu7469

最新推荐文章于 2021-06-25 17:12:26 发布

阅读量147

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/open-eye/archive/2013/05/21/3091110.html

版权

用了很长一段时间JQUERY,重新使用原生JAVASCRIPT显得很不习惯，最近"很"有时间，就重新拾一下吧

今天就模拟下苹果的菜单栏吧

这个效果是随着鼠标与图片中心的距离大小而变化

JS部分

/*-----------------------------------------------------------------------------
*作者:cici , email:105466706@qq.com
*version:1.0  , 时间：2013-05-21
-----------------------------------------------------------------------------*/
appleLib={
    addEvent:function(obj, sEv, fn){
        if(obj.attachEvent)
        {
            obj.attachEvent('on'+sEv, function (){
                fn.call(obj);
            });
        }
        else
        {
            obj.addEventListener(sEv, fn, false);
        }
    },
    start:function(){
        var _this = this;
        
        _this.addEvent(document,'mousemove',function(e){
            var i=0,
            oEvent=e||event,
            oDiv=document.getElementById('apple_line'),
            aImg=oDiv.getElementsByTagName('img'),
            iMax=200,
            d=0;
            for(i=0;i<aImg.length;i++){
                var x=oDiv.offsetLeft+aImg[i].offsetLeft+aImg[i].offsetWidth/2-oEvent.clientX;
                var y=oDiv.offsetTop+aImg[i].offsetTop+aImg[i].offsetHeight/2-oEvent.clientY;    
                d=_this.getDistrict(x,y);
                d=Math.floor(Math.min(d,iMax));
                aImg[i].width=(1-d/iMax)*64+64;
            }
        });
            
    },
    getDistrict:function(x,y){
        return Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
    }
}

HTML部分

<!DOCTYPE >
<HTML>
 <HEAD>
  <TITLE>苹果菜单</TITLE>
  <script type="text/javascript" src="js/apple.js"></script>
  <link href="css/apple.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript">
    window.onload = function(){
        
        appleLib.start();
    }
  </script>
 </HEAD>

 <BODY>
    <div id='apple_line'>
        <img src="images/0.png" width="64px"/>
        <img src="images/1.png" width="64px"/>
        <img src="images/2.png" width="64px"/>
        <img src="images/3.png" width="64px"/>
        <img src="images/4.png" width="64px"/>
        <img src="images/5.png" width="64px"/>
        <img src="images/6.png" width="64px"/>
    </div>
 </BODY>
</HTML>

转载于:https://www.cnblogs.com/open-eye/archive/2013/05/21/3091110.html