文章分类
HTML/CSS Flash教程 Fireworks教程 Dreamweave JavaScript 网站推广 网页理论 其他教程 视频教程
 产品搜索
关键字: 分类:

整站搜索:
最新更新资源:
海量设计素材
韩国网页设计模板
高清PSD素材库
Flash网站模板
设计素材图库:
婚纱影楼模板
韩国卡通图库
VIS模板
版式画册模板

最新素材图库



当前位置:首页 >> 网页教程>> JavaScript >> jQuery实例教程:jQuery网页图片切换效果

jQuery实例教程:jQuery网页图片切换效果


作者: 佚名 来源:网络 浏览:1 日期:2012-6-4 23:43:01

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

假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将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的值。

http://www.webjx.com/files/soft/1_120303222948.zip


上一篇:jQuery实例教程:制作网页中可折叠的面板 下一篇:HTML5和jQuery制作网页灰度图片悬浮效果
【关闭窗口】 【返回顶部】返回网页教程】 【返回JavaScript

相关推荐文章

滑动导航菜单的变体使用

WEBJX资源分享:2..

制作Web电子表格的j..

Jetpack扩展案例..

WEBJX收集非常有用..

javascr..

Firefox的Jet..


关于本站 | 广告服务 | 联系我们 | 站长微博 | 活动支持 | 友情链接 | 投稿热线 | 网站地图
版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号