JS实现Fisheye效果动感放大菜单代码


Posted in Javascript onOctober 21, 2015

本文实例讲述了JS实现Fisheye效果动感放大菜单代码。分享给大家供大家参考,具体如下:

这款Fisheye Menu,是采用JS+CSS+XHTML实现的动感放大菜单,放到图标上的时候,图标会被放大,整个菜单有缓冲弹簧的效果,学jQuery的朋友见的比较多,不过本款没有用到jQuery,效果却同样精彩。

运行效果截图如下:

JS实现Fisheye效果动感放大菜单代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fisheye 动感放大的菜单</title>
<style>
#fisheye_menu {
 list-style: none;
 padding: 0;
 margin: 10px;
 height: 81px;
}
#fisheye_menu li {
 position: relative;
 display: block;
 float: left;
}
#fisheye_menu span {
 position: absolute;
 top: 100%;
 left: 0;
 text-align: center;
 width: 79px;
 padding: 1px;
 margin: 0;
 border: solid 1px #bbb; 
 color: #333;
 background: #eee;
}
#fisheye_menu a {
 text-decoration: none;
}
#fisheye_menu img {
 border: 0;
 vertical-align: top;
}
</style>
<script type='text/javascript'>
var fisheyemenu = {
 startSize : 55,
 endSize : 88,
 imgType : ".gif",
 init : function () {
  var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");
  var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");
  for(var j=0; j<titleElements.length; j++) {
   titleElements[j].style.display = 'none';
  }
  for(var i=0; i<animElements.length; i++) {
   var y = animElements[i];
   y.style.width = fisheyemenu.startSize+'px';
   y.style.height = fisheyemenu.startSize+'px';
   fisheyemenu.imgSmall(y);
   animElements[i].onmouseover = changeSize;
   animElements[i].onmouseout = restoreSize;
  }
  function changeSize() {
   fisheyemenu.imgLarge(this);
   var x = this.parentNode.getElementsByTagName("span");
   x[0].style.display = 'block';
   if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;
   fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);
  }
  function restoreSize() {
   var x = this.parentNode.getElementsByTagName("span");
   x[0].style.display = 'none';
   if (!this.currentWidth) return;
   fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);
   fisheyemenu.imgSmall(this);
  }
 },
 resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {
  if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
  var actStep = 0;
  elem.widthChangeMemInt = window.setInterval(
   function() {
    elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
    elem.style.width = elem.currentWidth+"px";
    elem.style.height = elem.currentWidth+"px";
    actStep++;
    if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
   }
   ,intervals)
 },
 easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) {
  var delta = maxValue - minValue;
  var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
  return Math.ceil(stepp)
 },
 imgSmall : function (obj) {
  imgSrc = obj.getAttribute("src");
  var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0);
  var imgName = imgSrc.substr(0, typePos);
  obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType);
 },
 imgLarge : function (obj) {
  imgSrc = obj.getAttribute("src");
  var typePos = imgSrc.indexOf("_small", 0);
  var imgName = imgSrc.substr(0, typePos);
  obj.setAttribute("src", imgName+fisheyemenu.imgType);
 }
}
if ( typeof window.addEventListener != "undefined" )
 window.addEventListener( "load", fisheyemenu.init, false );
else if ( typeof window.attachEvent != "undefined" )
 window.attachEvent( "onload", fisheyemenu.init );
else {
 if ( window.onload != null ) {
 var oldOnload = window.onload;
 window.onload = function ( e ) {
  oldOnload( e );
  fisheyemenu.init();
 };
 }
 else
 window.onload = fisheyemenu.init;
}
</script>
 </head>
 <body>
  <div>
   <ul id="fisheye_menu">
    <li><a href="#1"><img src="images/icon.gif" alt="三水点靠木" /><span>Icon 1</span></a></li>
    <li><a href="#2"><img src="images/icon2.gif" alt="image description" /><span>Icon 2</span></a></li>
    <li><a href="#3"><img src="images/icon.gif" alt="脚本下载" /><span>Icon 3</span></a></li>
    <li><a href="#4"><img src="images/icon2.gif" alt="image description" /><span>Icon 4</span></a></li>
    <li><a href="#5"><img src="images/icon.gif" alt="3water.com" /><span>Icon 5</span></a></li>
    <li><a href="#6"><img src="images/icon2.gif" alt="image description" /><span>Icon 6</span></a></li>
   </ul>
   </div>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
js实现的网站首页随机公告随机公告
Mar 14 Javascript
符合标准的js表单提交的代码
Sep 13 Javascript
js获取域名的方法
Jan 27 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 #Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 #Javascript
chrome调试javascript详解
Oct 21 #Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 #Javascript
深入解析JavaScript的闭包机制
Oct 20 #Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 #Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 #Javascript
You might like
使用eAccelerator加密PHP程序
2008/10/03 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python定时器使用示例分享
2014/02/16 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
PyQt5每天必学之布局管理
2018/04/19 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python内置数据类型之列表操作
2018/11/12 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
如何查找和删除数据库中的重复数据
2014/11/05 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
合作意向书模板
2014/03/31 职场文书
新兵入伍心得体会
2014/09/04 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
阿凡达观后感
2015/06/10 职场文书
多人股份制合作协议书
2016/03/19 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers