剑锋博客

jquery缓动插件：easing

http://gsgd.co.uk/sandbox/jquery/easing/

请访问这个网页：http://www.javaeye.com/topic/545971

jQuery幻灯片插件：jQuery Cycle Plugin

这个插件的特点是干净！只有滚动图片，没有其它任何多余的元素。并且由于使用了jQuery的缘故，在IE和火狐中的滚动效果是一致的。

当然，为了实现更好看的效果，有人可能更喜欢使用flash作为幻灯片程序。这在某些场合是最好的选择，不过也有一些缺陷：

1、flash的导出链接，不会记录导出来源。这在做广告投放是无意是致命的缺点。因为无法统计广告点击效果（可以通过其它辅助技术来实现这一点功能，不过毕竟要做更多的努力）。

2、在一些浏览器安全设置中，可能会阻止flash的弹出窗口。

而使用基于原始html文档结构的js幻灯片，则无这些缺点。

jQuery插件的优势在于，我们无需关注技术的实现细节。我们只要按照插件的文档结构要求来安排我们的html，并且启用插件就可以了。

插件演示、插件下载。

可用切换效果：

blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
none
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom

设置方法：

$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'scrollUp' //这里设置切换效果
	});
});

 赶紧试试看吧！

网页太长，一般需要设置页内锚点，方便阅读。最原始的锚点是跳跃式的，速度太快，有时反而不友好。运用JavaScript，可以做出更友好、更让人喜欢用的锚点跳转效果。

"Page Scroll" 指的是整個網頁長度的滾動, 方法有 html, javascript, jQuery.

1. 首先說到 html 的方式, 它是頁面滾動的老祖宗, 所有的後續程序開發都是以它為基礎.
說它是 "滾動", 還不如說是 "跳躍", 因為它只在錨點 (Anchor) 之間跳躍.
做法: 在頁首定位點的標簽上標明 id="top", 然後在頁腳放個 <a href="#top">goTop</a> 這就完成了.
當鼠標點擊 goTop, 頁面就會直接跳到 #top 的位置.
當然你也可以隨意多放幾個 id 和 # 鏈接, 做較多的跳躍.

2. 拜完了老祖宗, 現在進入正題, 其實 javacript 才是滾動的好手.
scrollTo() 可把内容滾動到指定的座標. 語法是 scrollTo(x,y);
左右移動用得少, 所以 x 可以直接等於 0, 我們主要是用到 y.
全部頁面的總高度: pageY=document.body.offsetHeight;
跳到頁腳是: self.scrollTo(0, pageY);
跳到頁首當然就是: self.scrollTo(0, 0);
跳到某個 id, 要先將 id 轉為座標: idY=document.getElementById('id').offsetTop; self.scrollTo(0, idY);
其中的 self = window = 當前窗口
如果有框架, 還可以用:
frame[i] = self.frame[i] = 當前窗口的框架
parent = self.parent = 當前窗口的父窗口
top = self.top = 當前窗口的頂層窗口
但別急, 現在只是和 html 的效果一模一樣, 是用跳的.
如果把 y 值設入變量, 就可以滾動了:
滾到頁腳是: for (i=0; i<=document.body.offsetHeight; i+=10) { self.scrollTo(0, i) }
滾到頁首是: for (i=document.body.offsetHeight; i>=0; i-=10) { self.scrollTo(0, i) }
滾到某個 id 就要多一個判斷, 要向上還是向下, 主要用當前座標和目標座標的差值, 這可以留給你當練習.
這樣的滾動已經相當順暢了, 但有個缺點: Chrome 是用跳的不是用滾的.
天啊! 如果 Chrome 能支援, 我們就可不用 jQuery 了.

3. jQuery 有自己的程式庫, 運行 Scroll 是輕而易舉.
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
});
上面這行是 Opera 的補丁, 少了它 Opera 是直接用跳的而且畫面閃爍.
我知道有很多人教你用 $('body') 或是 $('html') 或是 $('html,body'), 但上面那一行補丁可以通殺.
滾到頁腳是: $body.animate({scrollTop: $('#bottom').offset().top}, 1000);
滾到頁首是: $body.animate({scrollTop: $('#top').offset().top}, 1000);
有沒發現都是直接抓 id, 所以滾到某個 id 就不用計算座標了, 這是 jQuery 一大優勢, 難怪 jQuery 會這麼流行.
專心看你會發現, 這動作和上一個 javascript 的效果一模一樣啊!
沒錯, 直線速度沒什麼不同, 如果只須要滾到 #top 或 #bottom 反而用 javascript 會簡單些.
如果還嫌效果不好, 網路上有很多 jQuery 插件是改善 Scroll 效果的, 你也可以下載來試試.
最後發現有個缺點不能不說, Chrome 對座標計算還有誤差...

4. 我發現有個變速的 javascript 值得推荐.
我的主題從 A8 - A9 都是用這個 js, 我主題右邊小三角就是了.
作者: Marco Rosella URI: http://lab.centralscrutinizer.it/the-tiny-scrollings/
它主要是使用減速效果, 越接近目標速度越慢, 就像車子慢慢減速再停止, 這看起來很舒服.
感覺效果比 jQuery 好, 未壓縮 js 才 3.04k, 比 jQuery 小太多了.

上面所有的 Scroll 示例在此, 可將 html copy 回去玩玩.
注意示例要用 jQ 1.2.x 才行, 因為我是用 input 直接叫取 jQ, 所以 1.3+ 不適用.

资料来源：http://kan.willin.org/?p=1311

在开发人物词条的时候，碰到这个问题。某些领导，因为活动众多，介绍相应也多，一个页面将加载很多图片。这样一来，导致整个页面加载很慢。

有什么方法可以避免加载慢呢？

JQuery为我们提供了两种方案：预加载和惰性加载。

预加载：JQuery应用：图片依次加载代码。

$(window).bind('load', function() {
    var preload = new Array();
    $(".hover").each(function() {
        s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
        preload.push(s)
    });
    var img = document.createElement('img');
    $(img).bind('load', function() {
        if(preload[0]) {
            this.src = preload.shift();
        }
    }).trigger('load');
});

惰性加载：JQuery插件：LazyLoad，插件使用方式：

 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.lazyload.js" type="text/javascript"></script>

调用：

$("img").lazyload();

两种相反的处理思想，孰优孰劣，看具体需要吧。