首页 > web前端 > js教程 > 如何使用 jQuery 在单击时动态更改图像源?

如何使用 jQuery 在单击时动态更改图像源?

Patricia Arquette
发布: 2024-12-04 09:17:11
原创
519 人浏览过

How Can jQuery Be Used to Dynamically Change Image Sources on Click?

使用 jQuery 更改图像源

在如下 Web 结构中:

<div>
登录后复制

当用户单击图像,您的任务是将其源更新为 imgx_off.gif,其中 x 代表图像

jQuery 能够处理此任务,还是 CSS 是首选方法?

使用 jQuery 的 attr() 函数

jQuery 提供attr() 函数,允许您修改属性值。要更改 ID 为 my_image 的图像源:

$('#my_image').attr('src', 'second.jpg');
登录后复制

基于事件的图像更改

将此代码连接到点击事件:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});
登录后复制

图片旋转

实现图像旋转:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
登录后复制

以上是如何使用 jQuery 在单击时动态更改图像源?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板