zoukankan      html  css  js  c++  java
  • 基于jQuery实现苹果Dock样式的菜单

    爱编程小编之前我们分享过相当数量的jQuery菜单了,今天要给大家带来一款Dock样式的jQuery菜单,用过苹果的朋友都知道,它的Dock菜单非常酷,配合漂亮的图标就更加绚丽了。效果图如下:

    在线预览   源码下载

    实现的代码。

    html代码:

    <div id="wrapper">
        <img src="images/1.png" width="64">
        <img src="images/2.png" width="64">
        <img src="images/3.png" width="64">
        <img src="images/4.png" width="64">
        <img src="images/5.png" width="64">
    </div>

    js代码:

     window.onload=function(){
               document.onmousemove=function(ev){
                   var oevent=ev||event;
                   var aimg=document.getElementsByTagName('img');
                   var odiv=document.getElementById('wrapper');
                   for(var i=0;i<aimg.length;i++){
                          var x=aimg[i].offsetLeft+aimg[i].offsetWidth/2;
                          var y=aimg[i].offsetTop+odiv.offsetTop+aimg[i].offsetHeight/2;
                          var a=x-oevent.clientX;
                          var b=y-oevent.clientY;
                          var dis=parseInt(Math.sqrt(a*a+b*b));
                          var scale=1-dis/200;
                        if(scale<0.5){
                            scale=0.5;
                        }
                        aimg[i].width=scale*128;
    
                   }
               }
            }

    via:http://www.w2bc.com/Article/19605

  • 相关阅读:
    2019年第二周作业
    2019年pta作业第二题——求最大值及其下标
    2019春第十一周作业
    2019春第十周作业
    2019年寒假作业3
    2019年寒假作业2
    2019年寒假作业1
    我的老师
    自说
    Day16
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4267595.html
Copyright © 2011-2022 走看看