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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
用javascript动态调整iframe高度的方法
Mar 06 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
原生js实现贪吃蛇游戏
Oct 26 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
cakephp常见知识点汇总
2017/02/24 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
应用艺术毕业生的自我评价
2013/12/04 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
个人承诺书
2014/03/26 职场文书
企业介绍信范文
2015/01/30 职场文书
合同补充协议书
2016/03/24 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库