jquery 圖片 上一張 下一張 鏈接效果（續(xù)篇）
更新時(shí)間：2010年04月20日 19:15:43 作者：
很久沒寫文章了，這段時(shí)間一直在做類似鮮果的一個(gè)應(yīng)用和數(shù)據(jù)采集，還有就是對(duì)企業(yè)和個(gè)人成長(zhǎng)的思考。
前段時(shí)間寫了篇圖片 上一張 下一張 鏈接效果，后來(lái)看到 jquery插件封裝，手里癢癢的，拿這個(gè)例子做ex.
封裝后的JS源碼：
/*
* imageupdown 1.0
* Copyright (c) 2009
* Date: 2010-04-20
* 圖片移動(dòng)上一張 下一張?zhí)匦?
*/
(function($){
$.fn.imageupdown = function(options){
var defaults = {
upCursor:"pre.cur",
upTitle:"點(diǎn)擊查看上一張",
upUrl:$(this).attr('left'),
downCursor:"next.cur",
downTitle:"點(diǎn)擊查看下一張",
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頁(yè)面調(diào)用方法：
<script type="text/javascript">
$(document).ready(function() {
$(".rootclass").imageupdown();
});
</script>
可能有疑惑的地方：
（1）function(e) e 是什么意思
應(yīng)該是對(duì)應(yīng)事件。
$().click(function(e) {}); // 這里的e是click事件
$().focus(function(e) {});// 這里的e是focus事件
封裝后的JS源碼：
復(fù)制代碼 代碼如下:
/*
* imageupdown 1.0
* Copyright (c) 2009
* Date: 2010-04-20
* 圖片移動(dòng)上一張 下一張?zhí)匦?
*/
(function($){
$.fn.imageupdown = function(options){
var defaults = {
upCursor:"pre.cur",
upTitle:"點(diǎn)擊查看上一張",
upUrl:$(this).attr('left'),
downCursor:"next.cur",
downTitle:"點(diǎn)擊查看下一張",
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頁(yè)面調(diào)用方法：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function() {
$(".rootclass").imageupdown();
});
</script>
可能有疑惑的地方：
（1）function(e) e 是什么意思
應(yīng)該是對(duì)應(yīng)事件。
$().click(function(e) {}); // 這里的e是click事件
$().focus(function(e) {});// 這里的e是focus事件
相關(guān)文章
JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁(yè)眉或頁(yè)腳內(nèi)部。本文給大家介紹JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳的相關(guān)知識(shí)，需要的朋友參考下吧2016-03-03
本篇文章主要是對(duì)Cookie中的Path與domain進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
用JQuery在網(wǎng)頁(yè)中實(shí)現(xiàn)分隔條功能的代碼
在C/S系統(tǒng)中有專門的分隔條控件，很方便實(shí)現(xiàn)，但在Asp.net中卻沒有。本文介紹了一種使用JQuery技術(shù)實(shí)現(xiàn)分隔條的功能2012-08-08
JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
JQuery Dialog(JS模態(tài)窗口,可拖拽的DIV) 效果實(shí)現(xiàn)代碼2010-02-02
jquery實(shí)現(xiàn)輸入框動(dòng)態(tài)增減的實(shí)例代碼
主要功能是動(dòng)態(tài)增減輸入框，而且支持對(duì)各個(gè)輸入框的檢測(cè)，每個(gè)輸入框在輸入內(nèi)容后，對(duì)其進(jìn)行錯(cuò)誤提示2013-07-07
jquery (show,fadeOut,Animate)簡(jiǎn)單效果
jquery (show,fadeOut,Animate)簡(jiǎn)單效果,需要的朋友可以參考下。2009-11-11
基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹狀結(jié)構(gòu)
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”，zTree 是開源免費(fèi)的軟件。接下來(lái)通過本文給大家介紹基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹狀結(jié)構(gòu)，感興趣的朋友一起看看吧2018-08-08
jQuery ui 利用 datepicker插件實(shí)現(xiàn)開始日期(minDate)和結(jié)束日期(maxDate)
這篇文章主要介紹了jQuery ui 利用 datepicker插件實(shí)現(xiàn)開始日期(minDate)和結(jié)束日期(maxDate),需要的朋友可以參考下2014-05-05
jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果,涉及jQuery相應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-07-07
jQuery UI Bootstrap是什么?jQuery UI Bootstrap是一個(gè)將jQuery UI集成到Bootstrap上的CSS框架,具體內(nèi)容請(qǐng)看下文2016-06-06