jQuery技术

jQuery图片切换效果

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去。下面是jQuery图片切换效果示例:

jQuery效果

该示例的核心jQuery代码:

$(document).ready(function() {
 $("h2").append('<em></em>')
 $(".thumbs a").click(function() {
 var largePath = $(this).attr("href");
 var largeAlt = $(this).attr("title");
 $("#largeImg").attr({
 src: largePath,
 alt: largeAlt
 });
 $("h2 em").html(" (" + largeAlt + ")");
 return false;
 });
});

首先给H2添加一个空的<em>元素。

当点击<p> 中的链接

将链接的href属性保存到 “largePath”变量中。

然后将标题属性保存到”largeAlt”变量中

将<img id=”largeImg”> 的scr属性用变量 “largePath”替代,而alt属性用变量”largeAlt”替代

将em(在h2中)的内容设置成变量largeAlt的值。

jQuery图片切换源码下载jQuery图片切换源码下载|共395.2 kB|已下载(61)次

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
a