菜单

澳门太阳娱乐手机登录JS达成Fisheye效果动感放大菜单代码_javascript技能_脚本之家

2020年3月2日 - 澳门太阳娱乐手机登录

澳门太阳娱乐手机登录,正文实例呈报了JS完成Fisheye效果动感放大菜单代码。分享给我们供我们参谋,具体如下:

那款Fisheye
Menu,是选用JS+CSS+XHTML落成的旺盛开大菜单,放到Logo上的时候,Logo会被放大,整个菜单有缓冲弹簧的效用,学jQuery的相恋的人见的比相当多,不过本款未有接纳jQuery,效果却长期以来精彩。

Fisheye 动感放大的菜单#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;}var fisheyemenu = { startSize : 55, endSize : 88, imgType : ".gif", init : function () { var animElements = document.getElementById.getElementsByTagName; var titleElements = document.getElementById.getElementsByTagName; 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; animElements[i].onmouseover = changeSize; animElements[i].onmouseout = restoreSize; } function changeSize() { fisheyemenu.imgLarge; var x = this.parentNode.getElementsByTagName; x[0].style.display = 'block'; if  this.currentWidth = fisheyemenu.startSize; fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333); } function restoreSize() { var x = this.parentNode.getElementsByTagName; x[0].style.display = 'none'; if  return; fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5); fisheyemenu.imgSmall; } }, resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) { if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt); var actStep = 0; elem.widthChangeMemInt = window.setInterval { elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr); elem.style.width = elem.currentWidth+"px"; elem.style.height = elem.currentWidth+"px"; actStep++; if  window.clearInterval(elem.widthChangeMemInt); } ,intervals) }, easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) { var delta = maxValue - minValue; var stepp = minValue+(Math.pow*actualStep),powr)*delta); return Math.ceil }, imgSmall : function  { imgSrc = obj.getAttribute; var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0); var imgName = imgSrc.substr; obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType); }, imgLarge : function  { imgSrc = obj.getAttribute; var typePos = imgSrc.indexOf; var imgName = imgSrc.substr; 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 ; fisheyemenu.init(); }; } else window.onload = fisheyemenu.init;}     Icon 1 Icon 2 Icon 3 Icon 4 Icon 5 Icon 6   

仰望本文所述对我们JavaScript程序设计有所支持。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图