您现在的位置：首页 > 前端教程 > Javascript教程

jQuery教程之三

时间：2010-01-15  来源：SSVFDN  作者：SSVFDN  点击数：1

在上两节的教程中我给大家简单的介绍了一些动画特效的应用。g98BeautyCss.org - 前端教程网

那么从这节我会给大家我会通过一个例子，来讲解一些动画的编写与思路g98BeautyCss.org - 前端教程网

首先给大家介绍下几个代码g98BeautyCss.org - 前端教程网

fadeIn 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。g98BeautyCss.org - 前端教程网
fadeOut 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。g98BeautyCss.org - 前端教程网
fadeTo 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数g98BeautyCss.org - 前端教程网

domain_01.html 实例g98BeautyCss.org - 前端教程网

以下代码为例g98BeautyCss.org - 前端教程网

<script>g98BeautyCss.org - 前端教程网
$(document).ready(function(){g98BeautyCss.org - 前端教程网
 $("#click_fadeIn").click(function(){g98BeautyCss.org - 前端教程网
  $(".fadeHide").fadeIn(500); //以淡入的方法显示出g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
 $("#click_fadeOut").click(function(){g98BeautyCss.org - 前端教程网
  $(".fadeOut").fadeOut(500); //以淡出的方法隐藏g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
 $("#click_fadeTo").click(function(){g98BeautyCss.org - 前端教程网
  $(".fadeTo").fadeTo(500,0.3); //指定淡入到多少透明度为此g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
 $("#click_fadefun").click(function(){g98BeautyCss.org - 前端教程网
  $(".fadefun").fadeTo(500,0.3,function(){alert("yes")});  //指定淡入到多少透明度为此，执行完淡出动画后再执行函数g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
 $("#click_slideDown").click(function(){g98BeautyCss.org - 前端教程网
  $(".slideDown").slideDown(500); //以向下增大的方法显示出g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
 $("#click_slideUp").click(function(){g98BeautyCss.org - 前端教程网
  $(".slideUp").slideUp(500); //以向上减小的方法隐藏g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
 $("#click_slideToggle").click(function(){g98BeautyCss.org - 前端教程网
  $(".slideToggle").slideToggle(500); //通过高度变化来切换所有匹配元素的可见性 可以使匹配的元素以“滑动”的方式隐藏或显示g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
 g98BeautyCss.org - 前端教程网
})g98BeautyCss.org - 前端教程网
</script>g98BeautyCss.org - 前端教程网
 
相信大家看到了·这一条会有点奇怪吧~ $(".fadefun").fadeTo(500,0.3,function(){alert("yes")});g98BeautyCss.org - 前端教程网

先执行完动画再执行个函数效果这完全是可以的·其实像以前偶说过的效果代码g98BeautyCss.org - 前端教程网
“show”,“hide”,”toggle”,”fadeIn”,”fadeOut”,”fadeTo”,”slideDown”,”slideToggle”,”slideUp”,”animate” 都可以这样的。g98BeautyCss.org - 前端教程网

如果换成g98BeautyCss.org - 前端教程网

$(".fadefun").fadeTo(500,0.3);g98BeautyCss.org - 前端教程网
function(){alert("yes")}
g98BeautyCss.org - 前端教程网

这样就不同了·这二个动作是同时进行的，在淡化的刚开始就会弹出yes所以像上面的那种有顺序的执行在后面的应用中是很重要的。g98BeautyCss.org - 前端教程网

Ok现在大家对这些特效都有简单的了解了·近来下我把图片自动翻滚的特效写法一一讲解下g98BeautyCss.org - 前端教程网

Domain_02案例g98BeautyCss.org - 前端教程网

大家可以看下这个案例的效果~~其实写这种效果我们要清楚的知道~有二个动作~一个是自动换图与选中数字切换到对面的图片.g98BeautyCss.org - 前端教程网

OK我们一个个来·先怎么让他自动换图呢?g98BeautyCss.org - 前端教程网

 

var k; //变个变量g98BeautyCss.org - 前端教程网
 k = 0; //初始变量为0g98BeautyCss.org - 前端教程网
 var mover_start;g98BeautyCss.org - 前端教程网
 mover_img(); //自动翻图片函数g98BeautyCss.org - 前端教程网
 function mover_img(){g98BeautyCss.org - 前端教程网
  $(".box img").hide(); //我们先藏全部的图片g98BeautyCss.org - 前端教程网
  $(".box span a").removeClass("a_active"); //删除数字选中的状态g98BeautyCss.org - 前端教程网
  $(".box img").eq(k).show(); //显示当前的图片，因为初始是0 所以这里显示是第一张图片g98BeautyCss.org - 前端教程网
  $(".box span a").eq(k).addClass("a_active"); //同时span里面的第一个A标签增加class 做为选中的状态g98BeautyCss.org - 前端教程网
  k+1 < $(".box img").length ? k++ : k=0; //三次元运算~如果k小于图片的总数，那K就是+1 如果等于或大于那就把K设为0; 这样就可以让图片滚到最后一张再转时回到第一张g98BeautyCss.org - 前端教程网
  mover_start = setTimeout(mover_img,4000); //重复执行这个函数每隔4秒g98BeautyCss.org - 前端教程网
 }
说明~~这样的话第一次$(".box img").eq(k)这里K是0是读取的初始值 所以是$(".box img").eq(0) <--第一张图片g98BeautyCss.org - 前端教程网
然后因为0小于图片的总数，K++就是K=1了g98BeautyCss.org - 前端教程网
mover_start = setTimeout(mover_img,4000);这里就进行第二次执行这个mover_img函数了~这时的K已经是1了 $(".box img").eq(1) <--第二张图片了g98BeautyCss.org - 前端教程网
这样反复执行，k+1 < $(".box img").length ? k++ : k=0;g98BeautyCss.org - 前端教程网
当k等于或大于图片的总数时，把K的值设为这样下次执行的g98BeautyCss.org - 前端教程网
$(".box img").eq(k) 就是$(".box img").eq(0) <--又回到第一张了g98BeautyCss.org - 前端教程网

就样一个自动翻滚的图片特效就完成了~g98BeautyCss.org - 前端教程网
那么偶们再看下选中怎么切换到对应的图片g98BeautyCss.org - 前端教程网

$(".box span a").each(function(i){ //每一个匹配的元素做为上下文做个执行g98BeautyCss.org - 前端教程网
  $(".box span a").eq(i).hover(g98BeautyCss.org - 前端教程网
   function(){ //悬停时g98BeautyCss.org - 前端教程网
    clearTimeout(mover_start); //先停止mover_img函数g98BeautyCss.org - 前端教程网
    $(".box img").hide(); //图片先全部隐藏g98BeautyCss.org - 前端教程网
    $(".box span a").removeClass("a_active"); //a标签的class全删除g98BeautyCss.org - 前端教程网
    $(".box img").eq(i).show(); //显示出选中的对应图片g98BeautyCss.org - 前端教程网
    $(".box span a").eq(i).addClass("a_active"); //选中的添加classg98BeautyCss.org - 前端教程网
    k=i;g98BeautyCss.org - 前端教程网
   },g98BeautyCss.org - 前端教程网
   function(){mover_start = setTimeout(mover_img,1);} //鼠标离开时重新开始执行mover_img函数g98BeautyCss.org - 前端教程网
  )g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
相信这样的解释大家都能理解了·那我现在把代码全部整合给大家看下g98BeautyCss.org - 前端教程网

$(document).ready(function(){g98BeautyCss.org - 前端教程网
 var k;g98BeautyCss.org - 前端教程网
 k = 0;g98BeautyCss.org - 前端教程网
 var mover_start;g98BeautyCss.org - 前端教程网
 mover_img();g98BeautyCss.org - 前端教程网
 function mover_img(){g98BeautyCss.org - 前端教程网
  $(".box img").hide();g98BeautyCss.org - 前端教程网
  $(".box span a").removeClass("a_active");g98BeautyCss.org - 前端教程网
  $(".box img").eq(k).show();g98BeautyCss.org - 前端教程网
  $(".box span a").eq(k).addClass("a_active");g98BeautyCss.org - 前端教程网
  k+1 < $(".box img").length ? k++ : k=0;g98BeautyCss.org - 前端教程网
  mover_start = setTimeout(mover_img,4000);g98BeautyCss.org - 前端教程网
 }g98BeautyCss.org - 前端教程网
 $(".box span a").each(function(i){g98BeautyCss.org - 前端教程网
  $(".box span a").eq(i).hover(g98BeautyCss.org - 前端教程网
   function(){g98BeautyCss.org - 前端教程网
    clearTimeout(mover_start);g98BeautyCss.org - 前端教程网
    $(".box img").hide();g98BeautyCss.org - 前端教程网
    $(".box span a").removeClass("a_active");g98BeautyCss.org - 前端教程网
    $(".box img").eq(i).show();g98BeautyCss.org - 前端教程网
    $(".box span a").eq(i).addClass("a_active");g98BeautyCss.org - 前端教程网
    k=i;g98BeautyCss.org - 前端教程网
   },g98BeautyCss.org - 前端教程网
   function(){mover_start = setTimeout(mover_img,1);}g98BeautyCss.org - 前端教程网
  )g98BeautyCss.org - 前端教程网
 })g98BeautyCss.org - 前端教程网
})g98BeautyCss.org - 前端教程网
这样就是一个完整的效果了~g98BeautyCss.org - 前端教程网
在这里我特别要提示了hover这个代码其它onmousermove与onmouseout 这二个很像~g98BeautyCss.org - 前端教程网
Hover本身就有二个动作的一个是选中另一个是离开g98BeautyCss.org - 前端教程网

此课已经结束~闪g98BeautyCss.org - 前端教程网

来顶一下