首页 > 代码库 > animate实例介绍

animate实例介绍

2024-07-16 13:17:58   220人阅读

1.animate，setInterval组合不断滚动；

function Tscroll(){  $().animate();  }setInter("Tscroll()",1000);     //注意里面的是 Tscroll(),而不是 Tscroll

clearInterval  用法：

function Tscroll(){  $().animate();      Ht = setInter("Tscroll()",1000);}$().click(function(){    clearInterval(Ht);    //注意：这里是Ht，而不是 Ht（）；});

2.animate，setTImeout组合不断滚动；

function Fscroll(){  $().animate();  Ft = setTimeout("Fscroll()",1000)    }Fscroll();

clearTimeout用法跟  clearInterval 一样

 

分析1：滚动模式：一直往一个方向滚动（往右滚动）

function ss (){  $().animate({left:-200});  ht = setTimeout("ss()",2000);    }ss();

分析2：滚动模式：带左右按钮滚动

$("#right").click(function(){        //点击事件    ss(-1)})$("#left").click(function(){    ss(1)})function ss (a){                    // 滚动  $().animate({left:-200});}

分析3：滚动模式：带左右按钮滚动,不点击自由滚动

autoss();$("#right").click(function(){      // 点击事件    ss(-1)})$("#left").click(function(){    ss(1)})function ss (a){                       // 点击滚动  $().animate({left:-200});}function autoss(){         // 自己滚动    $().animate({left:-200});    ht = setTimeout("autoss()",1000)}

 

 

事例1：用fadeTo,点左往左滚动，点右往右滚动;无人点击的时候自己滚动

html代码

<div class="c1">
<!--左右-->
<div class="c33">
<span id="prev"><img src="http://www.mamicode.com/Public/images/lo_10.png" /></span>
<span id="next"><img src="http://www.mamicode.com/Public/images/lo_11.png" /></span>
</div>
<!--广告切换-->
<div class="c3">
<div class="cc3">
<ul>
<li class="nav first"><a href=""><img src="http://www.mamicode.com/Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05_01.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05_01.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05.jpg" /></a></li>
<li><a href=""><img src="http://www.mamicode.com/Public/images/lo_05_01.jpg" /></a></li>
</ul>
</div>
</div>

<style>.c3{width: 710px; height: 386px; position: absolute; left: 0; top: 0; z-index: 0; overflow: hidden}    .cc3{position: relative;}    .cc3 li{opacity: 0; position: absolute; z-index:0;}    .cc3 li.nav{ z-index: 1}    .cc3 li.first{opacity: 1;}</style>

js

<script>$(document).ready(function(){    autoscroll();    $("#next").click(function(){        clickscroll(1);    });    $("#prev").click(function(){        clickscroll(-1);    });})function clickscroll(c){    var num = $(".cc3 li").index();    var n = $(".cc3 li").index($(".cc3 li.nav"));        if(n==num){        $(".cc3 li").removeClass("nav");        $(".cc3 li").eq(0).addClass("nav");                $(".cc3 li").eq(n).fadeTo(1000,0);        $(".cc3 li").eq(0).fadeTo(1000,1);    }else{        $(".cc3 li").removeClass("nav");        $(".cc3 li").eq(n+c).addClass("nav");                $(".cc3 li").eq(n).fadeTo(1000,0);        $(".cc3 li").eq(n+c).fadeTo(1000,1);        }        }function autoscroll(){    var num = $(".cc3 li").index();    var n = $(".cc3 li").index($(".cc3 li.nav"));        if(n==num){        $(".cc3 li").removeClass("nav");        $(".cc3 li").eq(0).addClass("nav");                $(".cc3 li").eq(n).fadeTo(1000,0);        $(".cc3 li").eq(0).fadeTo(1000,1);    }else{        $(".cc3 li").removeClass("nav");        $(".cc3 li").eq(n+1).addClass("nav");                $(".cc3 li").eq(n).fadeTo(1000,0);        $(".cc3 li").eq(n+1).fadeTo(1000,1);        }        at = setTimeout("autoscroll()",7000);}</script>

 


联系
我们