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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
JavaScript实现简单图片切换
Apr 29 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
python清理子进程机制剖析
2017/11/23 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
大学系主任推荐信范文
2013/12/24 职场文书
体育课课后反思
2014/04/24 职场文书
2014年征兵标语
2014/06/20 职场文书
食品安全责任书范本
2015/05/09 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android