基于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

时间: 2024-10-13 03:23:43

基于jQuery实现苹果Dock样式的菜单的相关文章

苹果Dock样式的菜单

在线演示 本地下载 原文地址:https://www.cnblogs.com/qixidi/p/10058071.html

基于JQuery的桌面Dock效果(稳定版)

就算鼠标 之所以将它命名为稳定版,是因为之前已经分享了一个初级版本的,之前的初级版中存在很多bug.现在经过反复琢磨.实验,修复了之前版本存在的很多不足之处,就算鼠标快速的滑动依然表现的很稳定.已经迫不及待的想要将我的最新成果分享给大家了,其实代码和之前的版本很相似. 首相是HTML页面代码: <!DOCTYPE html> <html lang="zh-cmn-Hans-CN"> <head> <meta http-equiv="C

基于jQuery和Bootstrap的手风琴垂直菜单

在线演示 本地下载 原文地址:https://www.cnblogs.com/qixidi/p/10037361.html

基于jQuery自适应窗口大小导航菜单

基于jQuery自适应窗口大小导航菜单.这是一款响应式导航菜单特效,支持手机导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式(默认)</h2> <ul class="pgwM

基于jquery宽屏菜单导航【精品】

demo预览地址:http://www.qhttl.com/content/view/2014/07/18/jiaoben75/jiaoben75/index.html 下载地址:基于jquery宽屏菜单导航 基于jquery宽屏菜单导航[精品],布布扣,bubuko.com

一个基于jQuery的简单树形菜单

在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够展开或关闭节点.另外,它还必需要求浏览器在兼容模式下才能正常使用(这个项目中使用的 easyUI 是 1.2.2 版本,新版的 Tree 不存在该问题),很是不方便. 想修改又无从下手,所以有单独写一个简单的树形菜单的想法,趁下班的时间,抽空写了一个简单的J

基于jQuery倾斜打开侧边栏菜单代码

基于jQuery多重图片无限循环动画效果.这是一款非常实用的jQuery多图片无限循环动画特效插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="paper-back"> <nav> <div class="close"></div> <a href="#">Home</a> <a href="#">Ab

基于jQuery垂直多级导航菜单代码

基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce"> <li> <a class="xz" href="#">目录A</a> </li> <li> <a href="#">目录B <img class=&qu

一款基于jquery和css3的响应式二级导航菜单

今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="header"> <div class="logo"> <a href="#">Responsive Nav</a> </div> <nav>