来自 计算机网络 2019-09-04 19:50 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

jquery完结动画菜单的左右轮转,jQuery达成鼠标响

正文实例汇报了jquery完毕动画菜单的左右滚动、渐变及图片背景滚动等功用。分享给大家供大家参照他事他说加以考察。具体如下:

正文实例陈诉了jQuery落成鼠标响应式反射率渐变动画效率。分享给大家供我们参考,具体如下:

那边演示基于jquery完成的卡通片菜单,内含三种意义的网址菜单,第一种是不带效应的古板导航菜单,第三种是带有图形滚动背景的美食指南,第三种是由右向左背景滚动的菜单,第种种则是背景象渐变的网址菜单,种种都很赏心悦目,喜欢Js菜单的可模仿借鉴一下。

先来探访运行作效果果:

运维效果截图如下:

图片 1

图片 2

实际代码如下:

在线演示地址如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js动画-透明度变化</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
  margin: 0;
  padding: 0;
  font-family:"微软雅黑"
}
#box{
  height:100px;
  width:100px;
  background-color:#0099CC;
  margin-top:200px;
  position:relative;
  /*透明度变化*/
  left:0px;
  filter:alpha(opacity:30);
  opacity:0.3;
}
span{
  display:block;
  color:blue;
  width:25px;
  height:100px;
  background-color:#FFFF99;
  position:absolute;
  left:100px;
}
</style>
</head>
<body>
  <div id="box">
    移动
  </div>
<script>
window.onload=function(){
  var div1=document.getElementById("box");
  div1.onmouseover=function(){
    startMove(100);
  }
  div1.onmouseout=function(){
    startMove(30);
  }
}
var timer=null;
var alpha=30;
function startMove(itarget){
  clearInterval(timer);
  var div1=document.getElementById("box");
  timer=setInterval(function(){
    var speed=0;
    if(alpha>itarget){
      speed=-10;
    }else{
      speed=10;
    }
    if(alpha==itarget){
      clearInterval(timer);
    }else{
      alpha+=speed;
      div1.style.filter="alpha(opacity:"+alpha+")";
      div1.style.opacity=alpha/100;
    }
  },100)
}
</script>
</body>
</html>

越来越多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery常用插件及用法总括》、《jQuery扩张本事总括》、《jQuery拖拽特效与能力总计》、《jQuery常见杰出特效汇总》、《jQuery动画与特作用法总计》及《jquery选拔器用法总括》

切切实实代码如下:

企望本文所述对大家jQuery程序设计具备补助。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery动态背景导航菜单</title>
<style type="text/css">
h2{clear: both;padding-top: 20px;}
ul{list-style: none;margin: 0;padding: 0;}
li{float: left;width: 100px;margin: 0;padding: 0;text-align: center;}
li a{display: block;padding: 5px 10px;height: 100%;color: #FFF;text-decoration: none;border-right: 1px solid #FFF;}
li a{background: url(images/bg2.jpg) repeat 0 0;}
li a: hover, li a: focus, li a: active{background-position: -150px 0;}
#a a{background: url(images/bg.jpg) repeat -20px 35px;}
#b a{background: url(images/bg2.jpg) repeat 0 0;}
#c a{background: url(images/bg3.jpg) repeat 0 0;}
#d a{background: url(images/bg4.jpg) repeat 0 0;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($) {
 $.extend($.fx.step,{
  backgroundPosition: function(fx) {
  if (fx.state === 0 && typeof fx.end == 'string') {
  var start = $.curCSS(fx.elem,'backgroundPosition');
  start = toArray(start);
  fx.start = [start[0],start[2]];
  var end = toArray(fx.end);
  fx.end = [end[0],end[2]];
  fx.unit = [end[1],end[3]];
   }
  var nowPosX = [];
  nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
  nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
  fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
  function toArray(strg){
  strg = strg.replace(/left|top/g,'0px');
  strg = strg.replace(/right|bottom/g,'100%');
  strg = strg.replace(/([0-9.]+)(s|)|$)/g,"$1px$2");
  var res = strg.match(/(-?[0-9.]+)(px|%|em|pt)s(-?[0-9.]+)(px|%|em|pt)/);
  return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
  }
 }
 });
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
 $('#a a')
  .css( {backgroundPosition: "-20px 35px"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
    $(this).css({backgroundPosition: "-20px 35px"})
   }})
  })
 $('#b a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
    $(this).css({backgroundPosition: "0 0"})
   }})
  })
 $('#c a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  })
 $('#d a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  })
});
</script>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<h1>jQuery Background Position</h1>
<h2>Example 0: No Script</h2>
 <ul id="noscript">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example A: Top down</h2>
 <ul id="a">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example B: Right left</h2>
 <ul id="b">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example C: Fade 1-colour</h2>
 <ul id="c">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example D: Fade 2-colour</h2>
 <ul id="d">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</body>
</html>

你或然感兴趣的小说:

  • 听说jquery的direction图片渐变动画功用
  • jQuery达成的背景颜色渐变动画功效示例
  • jquery落成动画菜单的左右轮转、渐变及图片背景滚动等功能
  • jQuery完毕鼠标响应式天猫动画效果示例
  • jQuery完结的鼠标响应缓冲动画效果示例
  • jQuery插件Slider Revolution完毕响应动画滑动图片切换效果
  • 一款基jquery超炫的卡通片导航菜单可响应单击事件
  • jQuery动画animate方法应用介绍
  • JQuery动画animate的stop方法应用详解
  • jQuery动画效果animate和scrollTop结合使用实例
  • 享受8款特出的 jQuery 加载动画和进程条插件

愿意本文所述对大家的jquery程序设计有所帮助。

你恐怕感兴趣的篇章:

  • 依附jquery的direction图片渐变动画功用
  • jQuery实现的背景颜色渐变动画作用示例
  • jQuery完毕鼠标响应式Taobao动画效果示例
  • jQuery达成的鼠标响应缓冲动画效果示例
  • jQuery插件Slider Revolution完成响应动画滑动图片切换效果
  • 一款基jquery超炫的动画导航菜单可响应单击事件
  • jQuery动画animate方法应用介绍
  • JQuery动画animate的stop方法应用详解
  • jQuery动画效果animate和scrollTop结合使用实例
  • 享用8款优良的 jQuery 加载动画和进程条插件
  • jQuery完结鼠标响应式发光度渐变动画效能示例

本文由六合联盟网发布于计算机网络,转载请注明出处:jquery完结动画菜单的左右轮转,jQuery达成鼠标响

关键词: