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 相关文章推荐
js中的异常处理try...catch使用介绍
Sep 21 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
在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
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
给Function做的OOP扩展
2009/05/07 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python json格式化打印实现过程解析
2020/07/21 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
食堂个人先进事迹
2014/01/22 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
《乞巧》教学反思
2014/02/27 职场文书
安全生产管理责任书
2014/04/16 职场文书
食品安全标语
2014/06/07 职场文书
体育口号大全
2014/06/18 职场文书
植树造林的宣传标语
2014/06/23 职场文书
校外活动方案
2014/08/28 职场文书
科学发展观演讲稿
2014/09/11 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
员工旷工检讨书
2015/08/15 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server