DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery 圖片 上一張 下一張 鏈接效果(續篇)
jquery 圖片 上一張 下一張 鏈接效果(續篇)
編輯:JQuery特效代碼     
前段時間寫了篇圖片 上一張 下一張 鏈接效果,後來看到 jquery插件封裝,手裡癢癢的,拿這個例子做ex.

封裝後的JS源碼:
代碼如下:
/*
* imageupdown 1.0
* Copyright (c) 2009
* Date: 2010-04-20
* 圖片移動上一張 下一張特效
*/
(function($){
$.fn.imageupdown = function(options){
var defaults = {
upCursor:"pre.cur",
upTitle:"點擊查看上一張",
upUrl:$(this).attr('left'),
downCursor:"next.cur",
downTitle:"點擊查看下一張",
downUrl:$(this).attr('right')
}
var options = $.extend(defaults, options);
this.each(function(){
var thisImage=$(this);
$(thisImage).bind("mousemove",function(e){
var positionX=e.originalEvent.x||e.originalEvent.layerX||0;
if(positionX<=$(this).width()/2){
this.style.cursor='url('+options.upCursor+'),auto';
$(this).attr('title',''+options.upTitle+'');
$(this).parent().attr('href',''+options.upUrl+'');
}else{
this.style.cursor=''+options.downCursor+'';
$(this).attr('title',''+options.downTitle+'');
$(this).parent().attr('href',''+options.downUrl+'');
}
});
});
};
})(jQuery);

html頁面調用方法:
代碼如下:
<script type="text/javascript">
$(document).ready(function() {
$(".rootclass").imageupdown();
});
</script>

可能有疑惑的地方:
(1)function(e) e 是什麼意思
應該是對應事件。
$().click(function(e) {}); // 這裡的e是click事件
$().focus(function(e) {});// 這裡的e是focus事件
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved