图片的点击放大

$(function() {
            //三个目标图片,添加单击事件
            $(".color_change ul li img").click(function () {
                //split分割符,前后分割
                var str = $(this).attr("src").split(".jpg");
                //str[0]获取分割后索引0的字符进行拼接
                //定义左上角大图片
                var img_small = str[0] + "_one_small" + ".jpg";
                var img_big = str[0] + "_one_big" + ".jpg";
                //在事件内,获取当前的src和alt->显示颜色
                //attr改变属性值     放大镜属性"jqimg": img_big   获取左上角大图片"src": img_small
                $("#bigImg").attr({ "src": img_small, "jqimg": img_big });
                //放大图片属性
                $("#thickImg").attr("href", img_big);
                //attr改变(.imgList li:eq(0) img)属性
                //左下角小图
                $(".imgList li:eq(0) img").attr("src", str[0] + "_one.jpg");
                $(".imgList li:eq(1) img").attr("src", str[0] + "_two.jpg");
                $(".imgList li:eq(2) img").attr("src", str[0] + "_three.jpg");
                //定义并获取当前图片颜色text属性
                var alt = $(this).attr("alt");
                $(".color_change strong").text(alt);
                //判断第三张图片是否存在
                if (alt == "粉绿") {
                    $(".imgList li:eq(2) img").hide();
                }
                else {
                    $(".imgList li:eq(2) img").show();
                }
            })
                    

//左下方小图点击放大

         $(".imgList li img").click(function () {
                //获取当前图片并分割字符
                var strArray = $(this).attr("src").split('.jpg');
                var imgSrc_small = strArray[0] + "_small" + ".jpg";
                var imgSrc_big = strArray[0] + "_big" + ".jpg";
                $("#bigImg").attr({ "src": imgSrc_small, "jqimg": imgSrc_big });
                $("#thickImg").attr("href", imgSrc_big);
            })
        })

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值