包含animate(ul,offset,50,30)的詞條

本文目錄一覽：

• 1、控制焦點輪播圖片
• 2、如何使用animate方法實現動畫
• 3、用原生JS寫的輪播效果，怎麼讓它有滑動的效果，不是直接切換

控制焦點輪播圖片

buttons[i].onclick=function()

{

var myIndex=parseInt(this.getAttribute(‘index’));

var offset=-600*(myIndex-index);

animate(offset);

index=myIndex;

show();

}

}

這段需要使用到js的閉包，改一下就好了

(function(){

buttons[j].onclick=function()

{

var myIndex=parseInt(this.getAttribute(‘index’));

var offset=-600*(myIndex-index);

animate(offset);

index=myIndex;

show();

}

}

})(i);

如何使用animate方法實現動畫

用於創建自定義動畫的函數。

返回值:jQuery animate(params, [duration], [easing], [callback])

如果使用的是「hide」、「show」或「toggle」這樣的字元串值，則會為該屬性調用默認的動畫形式。paramsOptions一組包

含作為動畫屬性和終值的樣式屬性和及其值的集合

params 對象{},注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left，如果使用的是「hide」、

「show」或「toggle」這樣的字元串值，則會為該屬性調用默認的動畫形式。

duration (可選)三種預定速度之一的字元串(“slow”, “normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)

easing (可選)String要使用的擦除效果的名稱(需要插件支持).默認jQuery提供”linear” 和 “swing”

callback (可選)Function在動畫完成時執行的函數

0.停止動畫

if($(‘.swaplist,.mainlist’).is(‘:animated’)){

$(‘.swaplist,.mainlist’).stop(true,true);

}

animate實例：

1.點擊按鈕後div元素的幾個不同屬性一同變化

$(“#go”).click(function () {

$(“#block”).animate({

width: “90%”,

height: “100%”,

fontSize: “10em”,

borderWidth: 10

}, 1000);

});

2.讓指定元素左右移動

$(“#right”).click(function () {

$(“.block”).animate({ left: ‘+50px’ }, “slow”);

});

$(“#left”).click(function () {

$(“.block”).animate({ left: ‘-50px’ }, “slow”);

});

3.在600毫秒內切換段落的高度和透明度

$(“p”).animate({

height: ‘toggle’, opacity: ‘toggle’

}, “slow”);

4.用500毫秒將段落移到left為50的地方並且完全清晰顯示出來（透明度為1）

$(“p”).animate({

left: 50, opacity: ‘show’

}, 500);

5.切換顯示隱藏

$(“.box h3”).toggle(function(){

$(this).next(“.text”).animate({height: ‘toggle’, opacity: ‘toggle’}, “slow”);

$(this).addClass(“arrow”);

return false;

},function(){

$(this).next(“.text”).animate({height: ‘toggle’, opacity: ‘toggle’}, “slow”);

$(this).removeClass(“arrow”);

return false;

});

});

//滾動焦點

$(window).scroll(function () { //當前窗口的滾動事件

var winTop = $(window).scrollTop(); //獲取當前窗口的大小

var objTop = $(“#obj1”).offset().top; //獲取當前對象的x坐標

});

用原生JS寫的輪播效果，怎麼讓它有滑動的效果，不是直接切換

如果是朝左翻頁，就把當前頁朝左偏移100%的寬度，讓下一頁同樣朝左偏移100%寬度。以下是代碼部分：

html head lang=”en” meta charset=”UTF-8″ title/title style .banner{ width:300px; height:250px; position: relative; z-index: 100; background: skyblue; margin:100px auto; overflow:hidden ; } .banner .first{ left:0; } .banner a{ width: 100%; height: 100%; position: absolute; display:block; top:0; left:100%; } .banner a img{ width: 100%; height: 100%; } .banner .pre{ position: absolute; left:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .banner .next{ position: absolute; right:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .