jquery 图片 上一张 下一张 链接效果(续篇)

算了吧7654321

算了吧7654321

2016-02-19 13:11

下面是个简单易学的jquery 图片 上一张 下一张 链接效果(续篇)教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!
前段时间写了篇图片 上一张 下一张 链接效果,后来看到 jquery插件封装,手里痒痒的,拿这个例子做ex.

封装后的JS源码:

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
/*
* 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页面调用方法:

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
script type="text/javascript"
$(document).ready(function() {
$(".rootclass").imageupdown();
});
/script

可能有疑惑的地方:
(1)function(e) e 是什么意思
应该是对应事件。
$().click(function(e) {}); // 这里的e是click事件
$().focus(function(e) {});// 这里的e是focus事件
展开更多 50%)
分享

猜你喜欢

jquery 图片 上一张 下一张 链接效果(续篇)

Web开发
jquery 图片 上一张 下一张 链接效果(续篇)

jQuery 点击图片跳转上一张或下一张功能的实现代码

Web开发
jQuery 点击图片跳转上一张或下一张功能的实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

PS怎样把一张图片放到另一张图片上?

PhotoShop PS PS教程
PS怎样把一张图片放到另一张图片上?

鼠标移动到一张图片时变为另一张图片

Web开发
鼠标移动到一张图片时变为另一张图片

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ps怎么把一张图放到另一张图上

电脑网络
ps怎么把一张图放到另一张图上

怎样快速把两张图片合成一张

摄影 人像摄影 静物摄影
怎样快速把两张图片合成一张

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

DIV+CSS相册制作教程

DIV+CSS相册制作教程

win10正式版好用吗?

win10正式版好用吗?
下拉加载更多内容 ↓