JS는 호 배경 그라데이션 effect_javascript 기술을 사용하여 탐색 메뉴 코드를 구현합니다.-JS 튜토리얼-php.cn

JS는 호 배경 그라데이션 effect_javascript 기술을 사용하여 탐색 메뉴 코드를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:36:46

원래의

1366명이 탐색했습니다.

이 기사의 예에서는 호 배경 그라데이션 효과를 사용하여 JS 탐색 메뉴 코드 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

맞춤형 효과가 적용된 JS CSS 네비게이션 메뉴입니다. 마우스가 그 위로 지나갈 때 흥미로운 호 모양의 배경이 나타납니다. 실제로 CSS를 사용하여 배경을 호출하고, JavaScript를 사용하여 배경의 움직임을 제어합니다. 유사한 기능을 달성하기 위해 jQuery가 사용되었습니다. 전체적인 느낌은 매우 좋습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圆弧背景的导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0px;padding:0px;font-size:12px;}
.div_menu{ position:absolute;left:100px;top:100px;}
.ul_menu{list-style:none;}
.ul_menu li{float:left;margin-left:1px;border:1px solid #33CCCC;display:block;padding:5px 3px;background:url(images/menu_bg.gif) repeat-x 0px -80px;padding:2px 12px;}
.ul_menu li a{height:40px;width:auto;color:#ffffff;font-size:20px;font-weight:600;text-decoration:none;}
</style>
<script type="text/javascript">
var isIE = (document.all)&#63;true:false;
var $ID = function(id){
 return "string"==typeof id&#63;document.getElementById(id):id;
}
var Class = {
 create:function(){
  return function(){
   this.initilize.apply(this,arguments);
  }
 }
}
var Extend = function(destination, source){
 for(var property in source){
  destination[property] = source[property];
 }
}
var Bind = function(object,fun){
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(){
  return fun.apply(object,args);
 }
}
var BindAsEventListener = function(object,fun){
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(event){
  return fun.apply(object,[event||window.event].concat(args));
 }
}
function addEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.addEventListener) {
  oTarget.addEventListener(sEventType, fnHandler, false);
 } else if (oTarget.attachEvent) {
  oTarget.attachEvent("on" + sEventType, fnHandler);
 } else {
  oTarget["on" + sEventType] = fnHandler;
 }
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.removeEventListener) {
 oTarget.removeEventListener(sEventType, fnHandler, false);
 } else if (oTarget.detachEvent) {
 oTarget.detachEvent("on" + sEventType, fnHandler);
 } else { 
 oTarget["on" + sEventType] = null;
 }
};
</script>
<script type="text/javascript">
var MyMenu = Class.create();
MyMenu.prototype = {
 initilize:function(ul){
  this.lis = ul.getElementsByTagName("li");
  for(var i=0;i<this.lis.length;i++){
   new BgChange(this.lis[i]);
  }
 }
}
var BgChange = Class.create();
BgChange.prototype = {
 initilize:function(li){
  this.li = li;
  this._fnMouseOver = Bind(this,this.MouseOver);
  this._fnMouseOut = Bind(this,this.MouseOut);
  addEventHandler(this.li,"mouseover",this._fnMouseOver);
  addEventHandler(this.li,"mouseout",this._fnMouseOut);
  this.timer = null;
  this.i = -80;
 },
 MouseOver:function(){
  this.Stop();
  this.i+=2;
  if(this.i>=0){
   window.clearTimeout(this.timer);
   this.i = 0;
  }else{
   this.ShowBg();
   this.timer = window.setTimeout(this._fnMouseOver,10);
  }
 },
 MouseOut:function(){
  this.Stop();
  this.i-=2;
  if(this.i<=-80){
   window.clearTimeout(this.timer);
   this.i = -80;
  }else{
   this.ShowBg();
   this.timer = window.setTimeout(this._fnMouseOut,10);
  }
 },
 ShowBg:function(){
  this.li.style.backgroundPosition = "0px " + this.i + "px";
 },
 Stop:function(){
  if(this.timer){
   window.clearTimeout(this.timer);
  }
 }
}
onload = function(){
 new MyMenu($ID("ul_menu"));
}
</script>
</head>
<body>
<div class="div_menu">
 <ul class="ul_menu" id="ul_menu">
 <li><a href="#">欢迎光临</a></li>
 <li><a href="#">最新更新</a></li>
 <li><a href="#">下载排行</a></li>
 <li><a href="#">网页特效</a></li>
 <li><a href="#">广告联系</a></li>
 </ul>
</div>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.