jquery 圖片 上一張 下一張 鏈接效果（續(xù)篇）
更新時(shí)間：2010年04月20日 19:15:43 作者：
很久沒(méi)寫(xiě)文章了，這段時(shí)間一直在做類似鮮果的一個(gè)應(yīng)用和數(shù)據(jù)采集，還有就是對(duì)企業(yè)和個(gè)人成長(zhǎng)的思考。
前段時(shí)間寫(xiě)了篇圖片 上一張 下一張 鏈接效果，后來(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)文章
回車執(zhí)行跳到下一個(gè)文本框，在本文通過(guò)jquery簡(jiǎn)單實(shí)現(xiàn)下，需要的朋友可以參考下2013-08-08
jQuery實(shí)現(xiàn)火車票買(mǎi)票城市選擇切換功能
本文通過(guò)實(shí)例代碼給大家分享了jQuery實(shí)現(xiàn)火車票買(mǎi)票城市選擇切換功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片左右切換的方法,設(shè)計(jì)jQuery操作頁(yè)面元素及對(duì)應(yīng)樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了jquery validation驗(yàn)證表單插件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家介紹了vue-preview縮略圖報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
下面小編就為大家?guī)?lái)一篇淺析jquery unbind()方法移除元素綁定的事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法,涉及jQuery針對(duì)json數(shù)據(jù)的解析與表格動(dòng)態(tài)創(chuàng)建操作相關(guān)技巧,需要的朋友可以參考下2016-10-10
jQuery調(diào)用Webservice傳遞json數(shù)組的方法
這篇文章主要介紹了jQuery調(diào)用Webservice傳遞json數(shù)組的方法,實(shí)例分析了jQuery基于ajax與Webservice傳遞json數(shù)據(jù)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-08-08
jQuery實(shí)現(xiàn)常見(jiàn)的隱藏與展示列表效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)常見(jiàn)的隱藏與展示列表效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06