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

2016-02-19 13:11 82 1 收藏

下面是个简单易学的jquery 图片 上一张 下一张 链接效果(续篇)教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

前段时间写了篇图片 上一张 下一张 链接效果,后来看到 jquery插件封装,手里痒痒的,拿这个例子做ex.

封装后的JS源码:

代码如下:

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

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.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事件

来源:http://www.tulaoshi.com/n/20160219/1603257.html

延伸阅读
标签: PS
PS设计一张创造日落效果   设计一张创造日落效果!光线(www.tulaoshi.com)射入大气时的低角度,令日出和日落拥有一天中最漂亮的颜色。 PS设计一张创造日落效果(2) PS设计一张创造日落效tulaoShi.com果(3)
标签: PS PS教程
  笔者以前做过一些计算机类的图书封面,这些书一般都有配套光盘,所以在封面制作中往往会加上一个光盘图标作说明。有一次为了配合封面格调,没有用现成的素材,而是用Photoshop画了一个,下面就来向大家介绍当时绘制光盘的方法。 1. 启动Photoshop CS,新建一个正方形白底文档,再新建一个图层,按下“Ctrl+R”键显示...
标签: PS
如何使用ps将两张图片合成一张   1、首先我们要提前选择两张我们需要合成的图片,然后打开PS,新建一个足够大的画布(www.tulaoshi.com)。 2、将两张需要合成的图片用移动工具拖动到新建的画布上。 3、按住ctrl+t键对图片大小进行适当的调整,并摆成你想要的效果。 4、选择图示的裁剪工具,对画布进行裁剪,将...
Photoshop使用一张图片表现多点时间   有一种概念把时间称www.tulaoshi.com作第四维度,日复一日年复一年,在这漫漫长河里,我们也只能记录短暂的一瞬间。至于说将时间与摄影相容,近来比较火的就是延时摄影了。不过延时之后的成果要不就是一段短片,或者是一张GIF图片。不过这些都不是今天的重点,我这次为你介绍的是一种比较另类的...
来源:形色主义作者:苏色 本教程用到的溶图方法非常特别,基本上不需要蒙版及橡皮工具就可以实现。只需要用调整一下图层样式的混合选项就可轻松溶图。 原图 最终效果 1、打开原图素材和下面的天空素材,把天空素材拖进来适当放好位置,然后点击图层面板下面的混合选项,如下图。 2、选择混合选项,出现下图所示界面...

经验教程

242

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部